1

私は問題があります。色のドロップダウンがあります。

例えば

<select>
    <option>Red</option>
    <option>Blue</option>
</select>

色の名前の前にカラーボックスを追加したい。

これに対する解決策が見つかりません。

事前に助けてくれてありがとう。

4

2 に答える 2

2

カラー ボックスやイメージを選択ボックスに直接簡単に追加する方法はまだ見つかりませんが、選択要素を定義リスト (DL) 要素に置き換えることで比較的簡単に行うことができます。ここでこれを行う方法を示す優れたチュートリアルがあります

カラーボックスhttp://jsfiddle.net/NjaEL/ で jsfiddle を作成しました(矢印アイコンのパスを変更して、コンテナーに矢印が表示されるようにするだけです)。

基本的なコードは次のとおりです。

HTML

<dl class="dropdown">
<dt ><a href="#"><span>Color</span></a></dt>
<dd>
    <ul>
    <li><a href="#"><span class="color" style="background-color:Red"></span>Red<span class="value">Red</span></a></li>
     ...       
     </ul>
</dd>
</dl>

CSS

.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; } .dropdown dd { position:relative; } .dropdown dt a {background:#ffffff url(images/arrow1.png) no-repeat scroll 97.5% center ; display:block; padding-right:20px;width:70px; border: 1px solid #d3d3d3;} .dropdown dt a:hover { color:#212121; border: 1px solid #999999;} .dropdown a, .dropdown a:visited { color:#555555; text-decoration:none; outline:none;} .dropdown a:hover { color:#212121;} .dropdown dd ul { background:#ffffff none repeat scroll 0 0; border:1px solid #d3d3d3; color:#555555; display:none; left:0px; padding:5px 0px; position:absolute; top:0px; width:90px; list-style:none;} .dropdown dd ul li a { padding:5px; display:block;} .dropdown span.value { display:none;} .dropdown .color { border: 1px solid silver; vertical-align:middle; margin-right:5px; min-width: 10px;}

Javascript

$(document).ready(function() {
$(".dropdown dt a").click(function() {
    $(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
    var text = $(this).html();
    $(".dropdown dt a span").html(text);
    $(".dropdown dd ul").hide();
    $("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
    return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
});
于 2012-12-25T21:54:00.607 に答える
0

CSSだけでは、すべてのブラウザで機能するわけではありません-ここを読んでください：https ：//stackoverflow.com/a/2966006/1361042

色付きのボックスは画像である必要があります。

于 2012-10-05T10:58:24.043 に答える