Как добавить значок SVG в качестве стрелки раскрывающегося списка?

Я пытаюсь с одного часа управлять своими выборами HTMl и заменить значок раскрывающегося списка на SVG, но у меня он не работает.

Это мой код:

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 height='24' viewBox='0 0 24 24' 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='#FFFFFF'/></g></svg>") no-repeat !important;
    background-position-x: 100%;
    background-position-y: 5px;
}

<select>
  <option value = "volvo">Volvo</option>
  <option value = "saab">Saab</option>
  <option value = "mercedes">Mercedes</option>
  <option value = "audi">Audi</option>
</select>

Что я здесь делаю не так?

html css svg

15.01.2019 22:29

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

22 602

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

select {
  padding: 15px;
  border-radius: 3px;
  height: 50px;
  color: #ffffff;
  padding-right: 30px;
  font-size: 14px;
  border-color: blue;
  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>

@ Mr.Jo, вы можете проверить этот stackoverflow.com/a/51734530/8620333, если вам нужна ссылка на background-position. Все есть

— 15.01.2019 23:59

15.01.2019 22:41