web-dev-qa-db-ja.com

'select'ハイライトカラーを変更

カスタマイズされたドロップダウンメニューボックスがあります（写真を参照）。オプションのハイライトの色を変更して、恐ろしい青を取り除き、選択した色に変更したいのですが、青いハイライトボックスを停止したいのですが。全体を選択し、オプションボックスから境界線を削除します。これらの一部またはすべてを削除するにはどうすればよいですか？

ありがとう

htmlcode:
<div class="contactselect"><select id="contactdropdown">
<option value="Email">Email Form</option>
<option value="Website">Website Form</option>
<option value="Creation">Creation Form</option></select>
</div>

csscode:
.contactselect select{
   background: url(Images/ArrowO.png) no-repeat right #000;
   width:268px;
   padding:5px;
   color:#F7921C;
   font-size:25px;
   font-family:dumbledor;
   line-height:1;
   border:solid 4px #F7921C;
   border-radius:10px;
   height:45px;
   -webkit-appearance:none;
}

Example

htmlcsshighlight
4
user3186203

選択オプションのホバーカラーはHTMLではなくオペレーティングシステムによってレンダリングされるため変更できませんが、青いアウトラインを削除するための2番目の答えは次のとおりです。

追加 outline:noneあなたのCSSに：

.contactselect select
{
   background: url(Images/ArrowO.png) no-repeat right #000;
   width:268px;
   padding:5px;
   color:#F7921C;
   font-size:25px;
   font-family:dumbledor;
   line-height:1;
   border:solid 4px #F7921C;
   border-radius:10px;
   height:45px;
   -webkit-appearance:none;
    outline: none;
}

これが JS Fiddle Demo です。

5
Shoaib Raza

HTMLは常に、ホバー時の色の変更を制限し、ボタンの変更も制限します。したがって、jQueryまたはJavascriptを使用して変更する必要があるため、添付したこのフィドルを参照してください： http://jsfiddle.net/nsoni/n3xxX/

ここでは、cssを変更することで、必要なものをすべて変更できます。

それ以外の場合、その背景色とボタンを変更するオプションはありません

2
Nidhi

JQueryまたは別のフレームワークなしで何らかの互換性が必要な場合、これは不可能です。 これらのドロップダウン/選択ボックスプラグインを調べてみてください。これらのプラグインのほとんどを使用すると、ドロップダウンボックスのスタイルと外観をカスタマイズできます。

1
WASasquatch

Firefoxでは、デフォルトのスタイルシートは

option:checked {
    background-color: -moz-html-cellhighlight !important;
    color: -moz-html-cellhighlighttext !important;
}

問題は、!importantを使用しても、内部の重要なプロパティをオーバーライドできないことです。

したがって、基本的には、独自のUIを実装しない限りできません。

編集：一部のブラウザでは、 box-shadowトリック を使用できます。

1
Oriol