html/css : create box color in combobox option

Question

<select name='color'>
  <option value='1' style='background-color:#EFAE00'>Maple Gold</option>
  <option value='2' style='background-color:#000316'>Midnight Black</option>
  <option value='3' style='background-color:#B7A8BA'>Orchid Gray</option>
</select>

how to create box color like this picture :

I believe, you need to use some custom plugin to achieve this. — Milan Chheda, Dec 21 '17 at 04:51

Calvin Ananda · Accepted Answer · 2017-12-21T05:15:10.933

I dont know PHP, i just can playing with styles.

I try to adding font-awesome.min.css for square, jquery.min.js, and bootstrap.min.css

Hope you like this : JSFiddle

I change <select> options into <ul><li> tag.

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
});

ul { 
    font-family: 'FontAwesome';
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<ul class="list-unstyled">
  <li class="init">[SELECT]</li>
  <li data-value="value 1"><span style="color:#EFAE00">&#xf0c8;</span> Maple Gold</li>
  <li data-value="value 2"><span style="color:#000316">&#xf0c8;</span> Midnight Black</li>
  <li data-value="value 3"><span style="color:#B7A8BA">&#xf0c8;</span> Orchid Gray</li>
</ul>

score 1 · Answer 2 · answered Dec 21 '17 at 04:57

1

That is not possible because the option element cannot have any child elements. It is only allowed to contain text. See here.

You need to create your own custom combo-box or use a custom library. Here is a good example. https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

answered Dec 21 '17 at 04:57

Oshi

494
6
13

sure, very nice reference. – Calvin Ananda Dec 21 '17 at 05:20

Abra · Answer 3 · 2020-07-30T15:42:27.467

it is very easy

html/css Answer
===============

<select name="color">
    <option></option>   
    <option value="1" style="color:#0570BF;">&#9724; Dark blue</option>
    <option value="2" style="color:#09C30D;">&#9724; Green</option>
    <option value="3" style="color:#ff0000;">&#9724; Red</option>       
</select>


PHP Answer
==========

<pre> 

doctors table <br>
id | name    | color
----------------------
1  | ahmed   | #ff0000
2  | Ali     | #6100ff
3  | Mohamed | #07d2ff
----------------------
</pre>

$query_doctors  = "SELECT * FROM doctors order by `id` asc  "; <br>
$result_doctors = mysqli_query($connection, $query_doctors);

<select name="id_doctor">

              <?php 
                    echo '<option value="">------</option>';
                    while($doctor = mysqli_fetch_assoc($result_doctors)) {

                    // output data from each row

                    $id = $doctor["id"];
                    $name = $doctor["name"];
                    $color = $doctor["color"];

                    echo '<option style="font-size:1.2em;color:'.$color.';" 
                           value="'.$id.'">&#9724; ';
                    echo $name.'</option>';

                    }
                ?>

</select>

Unfortunately this does not work: 1) the text would get the same color as the square. 2) once the option is selected the box + text become black. — ponchietto, Jan 19 '23 at 21:51

score 0 · Answer 4 · answered Jul 30 '20 at 15:48

it is very easy

html/css Answer
===============

<select name="color">
    <option></option>   
    <option value="1" style="color:#0570BF;">&#9724; Dark blue</option>
    <option value="2" style="color:#09C30D;">&#9724; Green</option>
    <option value="3" style="color:#ff0000;">&#9724; Red</option>       
</select>


PHP Answer
==========

<pre> 

doctors table <br>
id | name    | color
----------------------
1  | ahmed   | #ff0000
2  | Ali     | #6100ff
3  | Mohamed | #07d2ff
----------------------
</pre>

$query_doctors  = "SELECT * FROM doctors order by `id` asc  "; <br>
$result_doctors = mysqli_query($connection, $query_doctors);

<select name="id_doctor">

              <?php 
                    echo '<option value="">------</option>';
                    while($doctor = mysqli_fetch_assoc($result_doctors)) {

                    // output data from each row

                    $id = $doctor["id"];
                    $name = $doctor["name"];
                    $color = $doctor["color"];

                    echo '<option style="font-size:1.2em;color:'.$color.';" 
                           value="'.$id.'">&#9724; ';
                    echo $name.'</option>';

                    }
                ?>

</select>

html/css : create box color in combobox option

4 Answers4