如何跨越颜色块以及选项标签中的文本
它不是那么容易吗？
<select>
<option>Red<span style="width:7px;height:7px;background:red"></span></option>
<option>Green<span style="width:7px;height:7px;background:green"></span>
</option>
</select>
试图实现如下输出
任何想法如何做到这一点？
您不能在选择选项上使用其他html标签或css样式。但是您可以使用第三个库来渲染下拉列表并将其用作选择。例如Bootstrap
$(function() {
$('#my-select').find('li').click(function() {
$('#selected').html($(this).html());
});
});<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Single button -->
<div id='my-select' class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="selected">Colors</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#"><span style='width:10px; height:10px; background-color:red;display:inline-block;'></span> Red</a></li>
<li><a href="#"><span style='width:10px; height:10px; background-color:blue;display:inline-block;'></span> Blue</a></li>
<li><a href="#"><span style='width:10px; height:10px; background-color:green;display:inline-block;'></span> Green</a></li>
</ul>
</div>
</body>