Question

这不仅容易吗？

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

尝试实现如下所示的输出

任何人都知道该怎么做吗？

Answer 1

您不能在选择选项上使用其他html标签或css样式。但是您可以使用3rd库来渲染下拉列表，并将其像选择一样使用。例如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>

Answer 2

这不仅容易吗？

不，这不那么容易。您的浏览器将清除options标记内的所有数据。

这并不是您所要查找的，但我更喜欢这样做：

<select>
  <option style="background:red;">Red</option>
  <option style="background:blue;">Blue</option>
  <option style="background:green;">Green</option>
</select>

如何跨选项标签中的文本跨色块

2 个答案: