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>

如何创建像这张图片的盒子颜色：

Answer 1

我不知道 PHP ，我只能玩样式。

我尝试为 square ，font-awesome.min.css和jquery.min.js

添加bootstrap.min.css

希望你喜欢这样：JSFiddle

我将<select>个选项更改为<ul><li>代码。

＆＃13;

$("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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是不可能的，因为option元素不能包含任何子元素。它只允许包含文本。请参阅here。

您需要创建自己的自定义组合框或使用自定义库。这是一个很好的例子。 https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

Answer 3

这很容易

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>

Answer 4

这很容易

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：在combobox选项中创建框颜色

4 个答案: