フォームドロップダウンリストのスタイルを設定するにはどうすればよいですか？

Question

私はインターネットで広範囲にわたり検索しましたが、フォームにドロップダウンリストのドロップダウン部分のスタイルを設定する方法に関して何も役立つものは見つかりませんでした。私は正しい方向にポインタを感謝します。ありがとう。

Answer 1

上記のように、まっすぐなhtmlを使用することはほとんど不可能です。私はjQuery Comboboxでも良い結果を得ています。

Answer 2

スタイルを適用するには、SELECTセレクタを使用するか、クラス名をSELECT要素に適用します。しかし、要素に罫線のようなものを適用すると、IE < 8で問題が発生します。

OPTIONセレクタを使用してオプションをターゲティングできます。太字で（標準モードではFFまたはIE8を使用している場合）

SELECT { border: solid 1px red; font-weight: bold; } 
OPTION { background:green; font-style: italic; } 

はあなたに赤い枠でドロップダウンを与えるべきである、とのオプションは緑の背景と斜体にする必要があります。

Answer 3

可能性はありますが、最小限に抑えることができます。ドロップダウンリストのドロップダウンリストは、さまざまなブラウザで一貫してスタイルを設定することはできません（さまざまなサポートがあります）。

数ヶ月前に私がこのようなプロブラムを持っていたとき、私が見つけた唯一の解決策は、javascriptを使用して、ドロップダウンリストをul/liドロップダウンメニューに変換することでした。もちろん、値を選択するなど、処理が必要なイベントが数多くあります。

幸いにも、これは簡単な作業であることを可能にするJQuery用のプラグインです。 （このプラグインのBrainfaultリンクはもう動作していません）

Answer 4

私はしばらくの間、同じ問題に取り組んできました。ドロップダウン自体よりも短いホルダーdivを使用すると、とてもシンプルなソリューションを手に入れました。私はまた、ドロップダウンの矢印を取得して私が好きなように見えるように背景画像を使用します。それをチェックしてくださいhttp://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/

あなたが必要とするのは、選択タグと2つのCSSクラスの周りのdivです。

HTML：

<div class="mainselection"> 
<select name="State" id="input7"> 
    <option></option> 
    <option value="Alabama">Alabama</option> 
    ... 
    <option value="Wisconsin">Wisconsin</option> 
    <option value="Wyoming">Wyoming</option>        
</select> 
</div> 

CSS：

.mainselection { 
    overflow:hidden; 
    width:350px; 
    margin-left:35px; 
    background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px; 
    /* dropdown_arrow.png is a 31x28 image */ 
} 
select { 
    border:0; 
    background:transparent; 
    height:32px; 
    border:1px solid #d8d8d8; 
    width:350px; 
    -webkit-appearance: none; 
} 

はその後少しJavascriptを検証した後、私もそれを赤い枠を与えること .dropdownbadにdiv要素にクラスを切り替えることができます。

.dropdownbad { 
    border:2px solid #c13339; 
} 

デフォルトとエラー状態がここに表示されます：この質問を頼まれたので

が

Answer 5

、ブラウザ技術がはるかに向上しています。 javascriptなしでCSSを使用してカスタムドロップダウンメニューを作成できるようになりました。

は、このブログの記事をチェックアウト： http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Answer 6

を私が選択されていない場合はライトグレーだった私のカート内のドロップダウンを持っています。

#customer_details ul { 
color: black !important; 
} 

それは私が変更する必要があったので、他に何ができるかは言えません。

Answer 7

はCSSのための唯一の解決策を、このウェブサイトをチェックアウト： http://www.htmllion.com/default-select-dropdown-style-just-css.html

HTML：

<form> 
    <select> 
     <option>CSS</option> 
     <option>HTML </option> 
     <option>HTML 5</option> 
    </select> 
</form> 

はCSS：

<style> 
    select { 
     border: 0 !important; /*Removes border*/ 
     -webkit-appearance: none; /*Removes default chrome and safari style*/ 
     -moz-appearance: none; /* Removes Default Firefox style*/ 
     background: #0088cc url(img/select-arrow.png) no-repeat 90% center; 
     width: 100px; /*Width of select dropdown to give space for arrow image*/ 
     text-indent: 0.01px; /* Removes default arrow from firefox*/ 
     text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/ 
     color: #FFF; 
     border-radius: 15px; 
     padding: 5px; 
     box-shadow: inset 0 0 5px rgba(000,000,000, 0.5); 
    } 
</style>