1

我有个问题。我有一个颜色的下拉列表。

例如

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

我想在颜色名称之前添加一个彩色框。

我找不到解决方案。

我在这里先向您的帮助表示感谢。

4

2 回答 2

2

我还没有找到一种方法可以轻松地将颜色框或图像直接添加到选择框，但是通过将选择元素替换为定义列表 (DL) 元素来实现这一点相对简单。有一个很好的教程向您展示如何在此处执行此操作

我创建了一个带有颜色框的 jsfiddle http://jsfiddle.net/NjaEL/ （只需更改箭头图标的路径，以便在容器中显示箭头）。

基本代码是：

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