Вопросы Теги

CSS: добавить SVG как стрелку выпадающего списка

Чтобы подробно остановиться на ответе @ Bakuriu выше, я обнаружил, что это позволяет мне поймать предупреждение во время выполнения так же, как я поймаю предупреждение об ошибке, распечатав предупреждение красиво: 

import warnings

with warnings.catch_warnings():
    warnings.filterwarnings('error')
    try:
        answer = 1 / 0
    except Warning as e:
        print('error found:', e)

Вы, вероятно, сможете поиграть с размещением места warnings.catch_warnings () в зависимости от того, насколько большой размер зонтика, который вы хотите использовать, с такими ловушками.

2
задан Mr. Jo 16 January 2019 в 11:16
поделиться

1 ответ

Вам необходимо настроить окно просмотра, поскольку указанный путь не может быть виден с фактическим окном просмотра. Затем удалите дополнительное определение высоты, а также удалите !important, чтобы можно было установить background-position 

select {
    padding: 15px;
    border-radius: 3px !important;
    height: 50px !important;
    color: #ffffff !important;
    padding-right: 30px !important;
    font-size: 14px !important;
    border-color: blue !important;
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: blue url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>") no-repeat;
    background-position: right 5px top 50%;
}
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

0
ответ дан Temani Afif 16 January 2019 в 11:16
поделиться