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>

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>

Please help .Please see the following picture , I need to convert drop down to this type of boxes

• javascript
• jquery
• html
• css

• Do you mean you want a colorpicker – Pugazh Commented Apr 13, 2016 at 10:29
• Selection box with color – Manik Commented Apr 13, 2016 at 10:37
• like i.sstatic/VYnsP.jpg – Manik Commented Apr 13, 2016 at 10:41
• @Pugaz Friend, really thank you for your effort . Please see my question now . Also , could you please write code based on my html code – Manik Commented Apr 13, 2016 at 10:47
• How about using radio instead? Jsfiddle – Aki Commented Apr 13, 2016 at 10:58

5 Answers 5

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/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 pleted and working framework providing such form elements.

TD;DR:

Converter from this question merged with my CSS: JSFiddle.

Adapt this solution to your needs.

Use HTML5 input with type="color", here is example:

In options list you can specify list of colors that you want to see.

 <table class="variations" cellspacing="0">
      <tbody>
        <tr>
          <td class="label">
            <label for="pa_available-colors">Available Colors</label>
          </td>
          <td class="value">
           <input type="color" id="pa_available-colors" name="attribute_pa_available-colors" data-attribute_name="attribute_pa_available-colors" list="colors">
 <datalist id="colors">
  <option>#ff0000</option>
  <option>#0000ff</option>
  <option>#00ff00</option>
  <option>#ffff00</option>
  <option>#00ffff</option>
 </datalist>
          </td>
        </tr>
      </tbody>
    </table>

Here is the CSS:

select option[value="black"]{
   color:#fff;
    background: black;
}

select option[value="white"]{ 
color:#000;
    background: white;
}
select option[value="red"]{
   color:#fff;
    background: red;
}

<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>

But, I suggest that you just add selected="selected" to only value="".

Updated

Using your HTML.

See FIDDLE

Original

You can convert your select to radios with some JavaScript. Then use some CSS to handle presentation of that resultant HTML.

Gets transformed from this;

<div class="value">
  <select id="pa_available-colors" class="" name="attribute_pa_available-colors" data-attribute_name="attribute_pa_available-colors">
    <option value="">Choose an option</option>
    <option value="black" class="attached enabled" selected="selected">Black</option>
    <option value="white" class="attached enabled">White</option>
    <option value="red" class="attached enabled">Red</option>
  </select>
</div>

To this;

<div class="value">
  <input type="radio" name="attribute_pa_available-colors" value="">
  <label for="attribute_pa_available-colors">Choose an option</label>

  <input type="radio" name="attribute_pa_available-colors" value="black" checked="checked">
  <label for="attribute_pa_available-colors">Black</label>

  <input type="radio" name="attribute_pa_available-colors" value="white">
  <label for="attribute_pa_available-colors">White</label>

  <input type="radio" name="attribute_pa_available-colors" value="red">
  <label for="attribute_pa_available-colors">Red</label>
</div>

See FIDDLE here

i think this code will help you that you want to do

Html

<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">Black</option>
          <option value="white" class="attached enabled">White</option>
          <option value="red" class="attached enabled">Red</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

CSS

.selectbox>span {
  padding: 10px;
  border: 2px solid #fff;
  display: inline-block;
  vertical-align: middle;
}

.selectbox {
  border: 1px solid #dddddd;
  display: inline-block;
  cursor: pointer;
}

.selectbox.active {
  border: 1px solid #333;
}

JQuery

$("#pa_available-colors option").each(function() {
  //get values of all option
  var val = $(this).val();

  //do magic create boxes like checkbox
  $("td.value").append('<div class="selectbox" data-color="' + val + '"><span style="background-color:' + val + '"></span></div>');

});
//remove empty selectbox
$('.selectbox[data-color=""]').remove();

//change select box on click
$(".selectbox").click(function() {
  //remove selected from others
  $(".selectbox").removeClass("active");
  //do active to selected
  $(this).addClass("active");
  //get value
  var optVal = $(this).data("color");

  $("#pa_available-colors").val(optVal) 

});

//change select box on dropdown change
$("#pa_available-colors").change(function(){
    var optVal = $(this).val();
  $(".selectbox").removeClass("active");
  $(".selectbox[data-color='"+optVal+"']").addClass("active");
})

here is fiddle