選択ドロップダウンのスタイルは？

Question

私はFirefoxを実行しているMacにいます。

、あるいは私の：私は、彼らが異なって見える同じブラウザで他のウェブサイトを見てみると

：私は、ウェブサイトを選択し、ドロップダウンボックスには、面白いスタイルを持っていますここにコードしなさい：jsFiddle

私がそれを理解するのであなたが選択ボックスがいかにであるか表示されますか？

おかげ

Answer 1

あなたが<select>をフォーマットするためにCSSを使用していますか？またはCSSリセット？ borderまたはbackgroundのようなルールを使用すると、デフォルトのスタイルが消え、この灰色のボックスが表示されます。 これらのCSS設定を削除する必要があります。

Answer 2

デフォルトのドロップダウンのスタイルは、ブラウザによって異なります。残念なことに、それらを再スタイルする実際のCSSの方法はありません。

これは、私がこれまでよく使用していたCustom Select BoxのようなjQueryプラグインを使用すると効果があると言いました。

Answer 3

2番目の例は、selectのシステム表示を使用して表示されます。最初のものはシステム選択のようには見えません。おそらくシステムプレゼンテーションをリセットするだけではないカスタムスタイルが適用されるからです。

一般に、テキストフィールド以外のHTML入力フィールドを効果的にスタイルすることはできません。これを行うために、開発者は通常、複雑なHTMLを使用して入力コントロールを再実装します。これはIan Devlinによって提案されています。