как управлять выбранным тегом в chrome (Mac os)?

avatar
loveloper.dev
9 августа 2021 в 05:32
135
1
0

Хотя я закодировал только так

<select>
    <option>all</option>
    <option>opt1</option>
    <option>opt2</option>
</select>

мое поле выбора становится черным, когда я нажимаю это.
это изображение до того, как я нажал:

enter image description here

это изображение после того, как я нажал:

Я хочу сделать поле выбора следующим образом:
enter image description here

Есть ли кто-нибудь, кто знает, что мне делать? :(

Источник
cloned
9 августа 2021 в 05:36
0

Параметры отображаются ОС, вы не можете их стилизовать. Вы можете заменить весь выбор решением JS, для такого рода вещей существует множество библиотек, выберите ту, которая соответствует вашим потребностям.

cloned
9 августа 2021 в 05:37
0

Отвечает ли это на ваш вопрос? Как оформить элемент option тега select?

Ответы (1)

avatar
Brett Donald
9 августа 2021 в 05:42
0

Свойство CSS appearance определяет, используются ли собственные стили, применимые к вашей ОС, при рисовании поля. Установите его на none, чтобы отключить собственный стиль и заниматься своими делами.

select {
    -webkit-appearance: none;
    appearance: none;
}

Эта статья может дать вам дополнительные подсказки.

select {
    font-size: 30px;
}
.better {  
    -webkit-appearance: none;
    appearance: none;
  border: 1px solid #ff8200;
  background-color: #eee;
  border-radius: 3px;
  padding: 0.5em;
}
<p>This select is native to your OS</p>
<select>
    <option>all</option>
    <option>opt1</option>
    <option>opt2</option>
</select>
<p>This select is styled with CSS</p>
<select class="better">
    <option>all</option>
    <option>opt1</option>
    <option>opt2</option>
</select>