選択タグの下矢印を変更するには

選択タグの下矢印を変更するにはどうすればいいですか？例：それは今どのように見えるか選択タグの下矢印を変更するには

：

私はそれになりたい方法：

どのように私はこれを達成することができますか？

2017-01-04 Nurudin Imsirovic

それではない、ないまっすぐボックスのうち、少なくとも。要素をブラウザ間で一貫してスタイルできるものに変更するには、javascriptを使用するか、ボタン自体の置換要素を使用する必要があります。 – junkfoodjunkie

この質問を見てください：http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript – emtei

あなたはappearance:noneプロパティでselectタグのデフォルトの動作を削除する必要がある最初の、純粋なCSSでこれを試すことができます。

は、ブラウザが指定

外観：なし。
-webkit-appearance：none; /* chrome and safari */
-moz-外観：なし; /* Mozilla */
-ms-appearance：none; /* Internet explorer */

あなたが設定することができbackground-image

select { 
 
\t width:100px; 
 
\t float:left; 
 
\t appearance:none; 
 
\t -webkit-appearance:none; 
 
\t -moz-appearance:none; 
 
\t -ms-appearance:none; 
 
\t border:2px solid #000; 
 
\t background:url('http://www.free-icons-download.net/images/small-down-arrow-icon-15593.png'); 
 
\t background-repeat:no-repeat; 
 
\t background-size:16px 17px; 
 
\t background-position:right 0px; 
 
}

<select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
</select>

出典

2017-01-04 10:12:56

さて、それは私が望んだことをするようです。ありがとう、私はこれを参考にしてマークします。：D –

リストをどのように表示するかをブラウザに任せておく方が良いと思います。なぜユーザーは自分の習慣を変えるのですか？

エルス

How to style a <select> dropdown with CSS only without JavaScript?

出典

2017-01-04 10:11:42

選択タグの下矢印を変更するには

答えて

関連する問題