Добавить svg-icon (стрелка) в после выбора

Привет, я настраивал кроссбраузер, чтобы иметь тот же дизайн моих выпадающих списков в браузерах хром, IE, ff и сафари. Это хорошо работает! Я использовал последующий код:Добавить 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

Добавить svg-icon (стрелка) в после выбора

ответ

Смежные вопросы