選択入力をすべてのプラットフォームのすべてのブラウザで同じに見えるようにするにはどうすればよいですか？

Question

私は選択入力をすべてのブラウザで同じに見せる問題を解決しています（MacではChromeとSafariでレンダリングが異なります）。

Answer 1

CSSを適用してスタイルをリセットする必要があります（入力だけでなく、すべてのブラウザでページがほぼ同じになるように、すべての要素で非常に推奨される方法です）たとえばthis oneのために、その後、ご希望のスタイル（境界線の色と幅、背景、等...）にするために、フォーム要素

Answer 2

ONLY方法をスタイルする方法についてthis tutorialを見てみましょうを適用し、それらは同じ権利を見ます元の入力を隠し、プロキシとして機能し、隠された入力にその機能を渡す、適切なスタイルのhtmlに相当するものに置き換えることです。

JavaScriptで自動化されている可能性があります。しかし、それはの間違いです。あなたは、ウェブページのOSスタイルの要素に違った見方を強制するつもりはありません。これは、多くのユーザビリティやアクセシビリティの実践と矛盾します。

唯一の方法は、ウェブページ上で違った見方のコントロール要素をサポートするのに十分な柔軟性をデザインに加え、スタイルの調整を容易にするために異なるブラウザ用の異なるスタイルセットを使用することです同じスタイルルールが適用されているすべてのブラウザで同じように見え、動作する入力）。

Answer 3

残念ながら、人生はちょっとちょっとこれを吸う。あなたがファイル入力をスタイルする必要があるまでちょうど待って...今それは楽しいです！

Answer 4

jsを使用しても構わない場合は、独自のデザインをデザインすることもできます（jpg imgは元のselect要素と同じimgでもかまいません）。 div要素のdivは、select要素は、通常、内部のselect要素をその上に別のdivを設定し、その後

<div id="selectTxt" > 

が含まれますテキストが含まれていることをその画像の上に。

<div id="transparentSelect" class="transparent"> 
<select id="selectCar" name="selectCar"> 
     <option>Volvo</option> 
     <option>Saab</option> 
     <option>Mercedes</option> 
     <option>Audi</option> 
    </select> 
</div> 

今トリックがゼロ にselect要素の不透明度を設定することで、あなたは透明 クラスを追加することによって追加し、今のdiv

.transparent 
{ 
    filter:alpha(opacity=0); 
    -moz-opacity: 0; 
    opacity: 0; 
} 

に要素をクラスを適用することによって、これを行うことができますあなたがそれをクリックすると、リストはまだ表示されます。 リストは常にブラウザのデフォルトリストのようになります

をクリックし、selectTxt divの内側のhtmlをその値に設定するたびにjsを使用して選択値を抽出するようになりました。 あなたは、CSSやJS

とホバー効果とアニメーションの画像は私も同じように見えることを選択させることができますあなたが

をしたい画像の上に選択のテキストを取得この方法ですべてのブラウザが、矢印を直接クリックすると動作しません... ので、その劣ったバージョンが、あなたはそれを見たい場合は、ここでそれは

http://jsfiddle.net/fiddlerOnDaRoof/LM73V/

である、それはまた、矢印画像を欠いているが、あなたが