Можно ли стилизовать `<select>` так, чтобы он вел себя как ваниль `<div>`? - PullRequest
Новая
       0

Можно ли стилизовать `<select>` так, чтобы он вел себя как ваниль `<div>`?

0 голосов
/ 13 февраля 2020

Есть ли способ стилизовать следующую разметку… 

<select>
  <option>Canteloupe</option>
  <option>Canteloupe</option>
  <option selected>Crabapple</option>
</select>

basic select

… так, чтобы все опции были видны одновременно?

Я бы хотел, чтобы он вел себя , как если бы все элементы были <div> s, поэтому я могу выложить каждый вариант для печатной версии формы.

Например: 

<div>
  <div>Canteloupe</div>
  <div>Canteloupe</div>
  <div>Crabapple</div>
</div>

desired presentation of select

Я пробовал -webkit-appearance: none, который удаляет внешний вид операционной системы, но не останавливает элемент select из скрывая его невыбранные <option> s.

Многие встроенные элементы html могут иметь встроенный стиль, переопределяемый "обратно в ничто", но кажется, что <select> является магией c, и имеет поведение агента пользователя, которое нельзя отменить.

Мне не нужно поддерживать старые браузеры (например, IE11)

1 Ответ

0 голосов
/ 13 февраля 2020

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

#cars {
  border: 0 none;
}
<!DOCTYPE html>
<html>
<body>


<select id="cars" name="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">



</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...