css - 如何在选择输入栏中放置图像标签

Question

我下面有一个选择框，效果很好；然而，我想在每个选项组中放置一个小颜色框。我尝试在其中使用 span 标签，但它似乎不起作用。

我不想使用 anchor 标签或图片。如果可能的话，我更希望有某种容器标签。

我在下面附上了我的代码。

<select  name="search-legend">
      <option value=""></option>
      <option value="1"<?= $this->ReturnSearchValue == "1" ? 'selected' : '' ?>> <span id="redbox"> </span>  value1 </option>
      <option value="2"<?= $this->ReturnSearchValue == "2" ? 'selected' : '' ?>> <span id="bluebox"></span>  value2 </option>
      <option value="3"<?= $this->ReturnSearchValue == "3" ? 'selected' : '' ?>> <span id="greenbox"></span>  value3 </option>

     </select>

CSS

#redbox {
  background: red;

 }

Answer 1

你做不到。 HTML规范。不允许在 <option> 中使用 html 标记元素。我的浏览器只是忽略了它。我想如果你真的想要这个，你需要考虑一个 jQuery 插件或其他东西。也许谷歌的“jQuery 插件选择图像”。