1

I have a select box below that works perfectly; I however want to place a little colour box in each of the option groups. I tried using a span tag within it but it does not seem to work.

I don't want to use anchor tags or images. I would prefer if possible just to have some kind of container tag.

I have enclosed my code below. 

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

the css 

#redbox {
  background: red;

 }
4

3 回答 3

1

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

于 2013-08-07T13:37:21.193 回答
0

里面<option>不HTML支持。您可以设置样式<option>

HTML

<select  class="search-legend">
    <option value=""></option>
    <option value="" class="redbox"></option>
    <option value="" class="greenbox"></option>
    <option value="" class="bluebox"></option>
 </select>

CSS

.search-legend option.redbox{
    background:red;
}
.search-legend option.greenbox{
    background:green;
}
.search-legend option.bluebox{
    background:blue;
}
于 2013-08-07T13:34:12.960 回答
0

下面的代码将在 Firefox 中运行。但是对于那些浏览器，您必须使用一些 JS 库，例如：jQuery UI。

<select  name="search-legend">
  <option value=""></option>
  <option style="background-image:url(img1.png);" value="1"<?= $this->ReturnSearchValue == "1" ? 'selected' : '' ?>>value1 </option>
  <option style="background-image:url(img2.png);" value="1"<?= $this->ReturnSearchValue == "2" ? 'selected' : '' ?>>value2 </option>
  <option style="background-image:url(img2.png);" value="1"<?= $this->ReturnSearchValue == "3" ? 'selected' : '' ?>> value3 </option>
 </select>
于 2013-08-07T13:30:27.430 回答