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

Question

Please help to convert this drop down to selection box with color like white box, black box etc [not check box] .

So that page is loading , instead of showing drop down I need to show color selection boxes, please help.

I tried some code but it is only partially working .

<table class="variations" cellspacing="0">
  <tbody>
    <tr>
      <td class="label">
        <label for="pa_available-colors">Available Colors</label>
      </td>
      <td class="value">
        <select id="pa_available-colors" class="" name="attribute_pa_available-colors" data-attribute_name="attribute_pa_available-colors">
          <option value="" selected="selected">Choose an option</option>
          <option value="black" class="attached enabled" selected="selected">Black</option>
          <option value="white" class="attached enabled" selected="selected">White</option>
          <option value="red" class="attached enabled" selected="selected">Red</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

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>