1

下に選択ボックスがあり、完全に機能します。ただし、各オプション グループに小さなカラー ボックスを配置したいと考えています。その中でスパンタグを使用してみましたが、うまくいかないようです。

アンカー タグや画像を使用したくありません。可能であれば、ある種のコンテナタグを付けたいと思います。

以下にコードを同封しました。

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

 }
4

3 に答える 3

0

以下のコードは Firefox で動作します。ただし、これらのブラウザでは、jQuery UI などの JS ライブラリを使用する必要があります。

<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 に答える