1

私のPHPシステムでは、人々は色の組み合わせを選択できます。私はこのようなオプション選択リストでこれを行っています：

<style>
     OPTION.purple{ width: 100px; background-color: #1d5280; color:white}
     OPTION.green{ width: 100px; background-color: #30843b; color:white}
</style>
<select>
     <option>Choose color</option>
     <option class="purple">Purle/Blue</option>
     <option class="green">Brown/Green</option>
</select>

現在、各オプションには1色がありますが、1つのオプションに2色を与えることは可能ですか。したがって、オプションの前半には1つの色があり、オプションの残りの半分には別の色があります。

4

2 に答える 2

2

SCSSを使用してこれを行うことができます。ここのウェブサイトはすべてを教えてくれます。
--それ以外の
場合、差分クラスに別の色を使用すると、

 OPTION.purple{ width: 100px; background-color: #1d5280; color: white;}
 OPTION.green{ width: 100px; background-color: #30843b; color: red;}

または、同じ色の手段を使用します

 OPTION.purple{ width: 100px; background-color: #1d5280;}
 OPTION.green{ width: 100px; background-color: #30843b;}
 option.green, option.purple {color: white;}

また

<style>
     OPTION.purple{ width: 100px; background-color: #1d5280; }
     OPTION.green{ width: 100px; background-color: #30843b;}
     option.add {color: white}
</style>
<select>
     <option>Choose color</option>
     <option class="purple add">Purle/Blue</option>
     <option class="green add">Brown/Green</option>
</select>
于 2012-11-09T10:03:53.407 に答える
1

画像のない純粋な CSS では、できないと思います。画像を使用することをお勧めします。

ライブデモ

このデモでは線形グラデーションを使用します (注: FF を使用している場合は で、Opera を使用している場合は で変更-webkit-linear-gradientしてください)。要素には機能しますが、オプションの背景には適用できません (デモを参照)。-moz-linear-gradient-o-linear-gradientdiv

于 2012-11-09T10:19:54.353 に答える