2

私はhtmlタグを持っていて、行間で交互に表示しselectたいのですがbackground-color、以下は私の試みですoption

<select name="j_idt8:j_idt13" size="1">    
   <option value="value1" class="option1">label1</option>
   <option value="value2" class="option2">label2</option>
   <option value="value3" class="option1">label3</option>
   <option value="value4" class="option2">label4</option>
   <option value="value5" class="option1">label5</option>
</select>

option.option1 {
   background-color: #ccc;
}

option.option2 {
   background-color: #fcc;
}

これは FF でのみ機能しますが、Chrome と safari では機能しません。CSS の第一人者がこれを理解するのを手伝ってくれますか? jsfiddle も添付して、異なるブラウザー間で開くことができるようにします。

http://jsfiddle.net/cYEE2/

注: Chrome: 20.0.1132.47
Safari: 5.1.7
Firefox: 13.0.1

4

2 に答える 2

3

選択オプションのカラーリングは、すべてのブラウザーでサポートされているわけではなく、サポートされている場合でも、通常はパディングなどに問題があります。

私のアドバイスは、それをサポートしているブラウザー (Firefox は完全に、Chrome は部分的にはパディングを無視し、Safari は完全に無視する) で単純に使用し、サポートしていないブラウザーでは忘れることです。

他のブラウザは、このオプションをサポートしていません。

于 2012-07-01T22:57:00.790 に答える
2

残念ながら、CSS を使用して SELECT 要素内の個々の OPTION 要素の書式を変更できるのは、ブラウザー固有です。上記の CSS は一部のブラウザーでは機能しません。

jQuery プラグインなど、使用できる SELECT 要素の CSS に適した代替手段があります。

于 2012-07-01T22:56:31.060 に答える