Is it possible to have a bunch of <select> dropdowns in html that only display a small (say 10 pixels wide) icon, but when you click it the drop down has a list with the icons beside a descriptive string. (Let's see if ASCII art works on SO):
[X]
| X - Disable |
| v/ - Enable |
| O - Ignore |
+-------------+
[O]
[v]
[X]
Can that be done in CSS? Or in jQuery?
This is not possible with a <select> tag in HTML. You'd need to use a custom control provided perhaps with a jQuery plugin. Either way, the entire thing would have to be Javascript and probably wouldn't make use of <select> at all. You could also take a look at ExtJS if you wanted a set of more fully-featured rich controls. It has a Menu class you could use for this.
Yes you can do it using jquery. Marghoob Suleman’s Javascript Combo Box plugin for jquery looks like what you want.
It looks like you want a combination of this dropdown with some code similar to BalusC's answer - so that only the image is shown unless the dropdown is active.
The show/hide part can be done with little help of jQuery. Here's an SSCCE, just copy'n'paste'n'run it.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2403303</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('select')
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
.bind('click', function() { $(this).toggleClass('clicked'); })
.bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
.bind('change blur', function() { $(this).removeClass('expand clicked'); });
});
</script>
<style>
select { font-family: monospace; width: 35px; }
select.expand { width: auto; }
</style>
</head>
<body>
<select><option>X - Disable</option><option>V - Enable</option><option>O - Ignore</option></select><br>
<select><option>X - Disable</option><option>V - Enable</option><option>O - Ignore</option></select><br>
<select><option>X - Disable</option><option>V - Enable</option><option>O - Ignore</option></select><br>
</body>
</html>
Unfortunately, it doesn't work in MSIE, but you can do it with CSS:
select#dropdown option[value="disable"] {
background-image:url(disable.png);
}