selectの後にsvg-icon（矢印）を追加

こんにちは私はクロスブラウザをスタイリングして、ブラウザのchrome、IE、ff、safariのドロップダウンと同じデザインにしました。これはうまくいく！私は今、欠場すると、これは（いつものように）ドロップダウンであることを示している矢印アイコンであるselectの後にsvg-icon（矢印）を追加

label { 
 
    font-family: Arial; 
 
} 
 

 
select { 
 
    transition: border-color ease-in-out 0.15s; 
 
    background: transparent; 
 
    border: 1px solid $BORDER_COLOR; 
 
    outline: 0; 
 
    padding: 5px; 
 

 
    -webkit-user-select: none; 
 
    -moz-user-select: -moz-none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 

 
    -webkit-appearance: none; 
 
    -moz-appearance: radio-container; 
 
    appearance: none; 
 
} 
 
\t \t

<body> 
 
    <label>City</label> 
 
    <select> 
 
    <option>Zurich</option> 
 
    <option>Vienna</option> 
 
    <option>Berlin</option> 
 
    </select> 
 
</body>

：私は、次のコードを使用していました。私も自分の衣装アイコン（svg）を追加したいと思います。私はこのCSSでそれを試してみました：

background: url("arrow_down_grey.svg") no-repeat center right;

矢印が正しい位置（右中央）で、正しいサイズであるが、ちょうどあれば選択の幅が十分な大きさです。選択は、アイコンがこのようなテキストの中に十分な長さでない場合：

私の考えは、私の選択の「後」擬似でそれを追加することになりました。私がインターネットで見つけたすべてのチュートリアルは実際には機能しませんでした。誰か助けてくれますか？

ありがとうございます！

出典

2016-05-20 MrBuggy

どのように？ http://stackoverflow.com/questions/31531865/css-change-dropdown-arrow-to-unicode-triangle – BigRedDog

@BigRedDogこんにちは、答えに感謝します。これは、感謝の気持ちで私が探し求めた解決策です。ハリーから以下の回答を確認してください。それは後のことよりはるかに簡単で、うまく動作します。 :) – MrBuggy

要素のpadding-rightをイメージの幅と等しく設定できます。これを行うと、要素の内容は、画像が開始される場所の前で切り捨てられます（下のスニペットのように）。これについて

label { 
 
    font-family: Arial; 
 
} 
 

 
select { 
 
    transition: border-color ease-in-out 0.15s; 
 
    background: transparent; 
 
    border: 1px solid $BORDER_COLOR; 
 
    outline: 0; 
 
    padding: 5px 25px 5px 5px; 
 

 
    -webkit-user-select: none; 
 
    -moz-user-select: -moz-none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 

 
    -webkit-appearance: none; 
 
    -moz-appearance: radio-container; 
 
    appearance: none; 
 
    background: url("http://i.stack.imgur.com/RGBNj.png") no-repeat center right; 
 
    
 
}

<body> 
 
    <label>City</label> 
 
    <select> 
 
    <option>Zurich</option> 
 
    <option>Vienna</option> 
 
    <option>Berlin</option> 
 
    </select> 
 
    <br><br> 
 
    <label>Country</label> 
 
    <select> 
 
    <option>United States of America</option> 
 
    <option>India</option> 
 
    <option>England</option> 
 
    </select> 
 
</body>

出典

2016-05-20 05:58:37 Harry

こんにちは、あなたの高速回答に感謝！これは "アフター"よりはるかに簡単で、うまくいきます、ありがとう、いい日です！ :)あなたは正解の印を得るでしょう。 ;） – MrBuggy

selectの後にsvg-icon（矢印）を追加

答えて

関連する問題