Convert dropdown to selection boxes with color and trigger drop down action

Using dropdown list:

Answer is simple: you can’t.

Let me explain why. The answer for this question is also really, really simple: MSDN on option tag. You can see there this paragraph:

Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing select element as a whole.

Of course you can convert your dropdown list to something else (it’s even in linked questions… don’t be that lazy), but is it still dropdown list then? See next part of the answer for more information on using e.g. radio element.

Using something else:

As a workaround you can try making it with, for example, radio element:

/* General stuff - radio button. */
input[type="radio"] {
  position: relative;
  width: 22px;
  height: 22px;
  vertical-align: bottom;
}
input[type="radio"]:checked:before {
  border: 1px solid #111;
}
/* The "background" - white background with gray border. */
input[type="radio"]:before {
  position: absolute;
  top: -2px;
  left: -2px;
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border: 1px solid #999;
  border-radius: 3px;
  background-color: #fff;
}
/* The "foreground" - color "square". */
input[type="radio"]:after {
  position: absolute;
  top: 1px;
  left: 1px;
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  box-shadow: inset 1px 1px 3px 1px rgba(0,0,0,0.12);
}
/* Colours */
input[type="radio"][value="red"]:after {
  background: #c44;
}
input[type="radio"][value="green"]:after {
  background: #4c4;
}
input[type="radio"][value="blue"]:after {
  background: #44c;
}
Colour:
<div class="list">
  <input type="radio" name="color" value="red" checked>
  <input type="radio" name="color" value="green">
  <input type="radio" name="color" value="blue">
</div>   

Here is fiddle with hiding (submenu-like): https://jsfiddle.net/sts77L2h/

With some additional work you should be able to make it work more like dropdown list. Or you can experiment with it to get any result you can imagine.

Obviously you can also try using other elements than radio or even look (I don’t know any at the time of writing) for a completed and working framework providing such form elements.

TD;DR:

Converter from this question merged with my CSS: JSFiddle.

Adapt this solution to your needs.

Leave a Comment