Question

我有问题。我有一些颜色。

例如

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

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

我无法找到解决方案。

感谢您的帮助。

Answer 1

我还没有找到一种方法可以轻松地将颜色框或图像直接添加到选择框中，但通过使用“定义列表”（DL）元素替换“选择元素”来执行此操作相对简单。有一个很好的教程向您展示如何执行此操作here

我创建了一个带有颜色框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();
});
});

Answer 2

只使用CSS才能在所有浏览器中使用 - 请在此处阅读：https://stackoverflow.com/a/2966006/1361042

并且您的彩色框应该是图像。

在选择框中添加颜色框

2 个答案: