HTML/CSS：この絵のようなボックスの色を作成する方法を

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を知りませんスタイル。

私は平方、jquery.min.js、およびbootstrap.min.css

ためfont-awesome.min.cssを追加しようが、このようにあなたを願っています：JSFiddle

私は<ul><li>タグに<select>オプションを変更します。オプションの要素が子要素を持つことができないので、可能ではない

$("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>

Answer 2

。テキストのみを含めることができます。 hereを参照してください。

独自のカスタムコンボボックスを作成するか、カスタムライブラリを使用する必要があります。 これは良い例です。 https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/