HOME > > >

selectメニューのデザイン

selectメニューのリストが大量の場合、グルーピングして背景色を変えてやるとわかりやすくなる。

ただブラウザによっては効果が出ないものもあるので確実にしたい場合はjavascriptを利用した方がよい。

サンプルソース

CSS

  1.  
  2. optgroup {
  3.     font-style: normal;
  4. }
  5.  
  6. optgroup.bgRed {
  7.     background-color: #FF0000;
  8. }
  9.  
  10. optgroup.bgBlue {
  11.     background-color: #99FFFF;
  12. }
  13.  
  14. optgroup.bgGreen {
  15.     background-color: #CEFFCE;
  16. }
  17.  

HTML

  1.  
  2. <select>
  3.     <optgroup label="赤いもの" class=bgRed>
  4.         <option value="りんご">りんご</option>
  5.         <option value="赤おに">赤おに</option>
  6.         <option value="サンタクロース">サンタクロース</option>
  7.     </optgroup>
  8.  
  9.     <optgroup label="青いもの" class="bgBlue">
  10.         <option value="空"></option>
  11.         <option value="海"></option>
  12.         <option value="どらえもん">どらえもん</option>
  13.     </optgroup>
  14.  
  15.     <optgroup label="緑のもの" class="bgGreen">
  16.         <option value="植物">植物</option>
  17.         <option value="ノコノコ">ノコノコ</option>
  18.         <option value="がちゃぴん">がちゃぴん</option>
  19.     </optgroup>
  20. </select>
  21.  

実行結果