Как стилизовать ширину выпадающего списка?

Question

[Андрей Филимонов]

Здравствуйте,
есть выпадающий список в форме на сайте, на ПК всё ок, а в мобильном виде выпадающее поле выходит за границы родительского поля

подскажите пожалуйста, как поправить, чтобы не выезжало?
css

select {
border: 3px solid transparent; 
outline: 0;  
-moz-border-radius: 8px; 
-webkit-border-radius: 8px; 
border-radius: 8px; 
display: block; 
width: 100%; 
margin-top: 1em; 
padding: 2% 0 2% 3%;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
resize: none; 
font-family: 'Roboto', sans-serif;
font-size: 14pt;
color: #838383;	
  -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/
  -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/
}
select::-ms-expand {
  display: none; /*убираем галочку в IE*/
}

html

<form method="post" action="javascript:void(0);" onsubmit="send_form_gruppa();" id="forma-gruppa"> 
<input id="na-glav" name="fio" placeholder="Ф.И.О" /> 
<input id="na-glav" type="text" name="phone" placeholder="Телефон" /> 
<input id="na-glav" type="text" name="age" placeholder="Возраст девочки" /> 
	<!--Взял от сюда https://html5book.ru/sozdanie-html-form/-->
	 <select name="zal">
        <option>Адрес зала</option>
		 <option value="Белградская 28к2">Белградская 28к2, м.Международная</option> 
        <option value="Рижский 8">Рижский 8, м.Балтийская</option> 
        <option value="Лесной 59к7">Лесной 59к7, м.Лесная</option>
		  <option value="Л.Пилютова 50к3">Л.Пилютова 50к3, м.Проспект Ветеранов</option> 
      </select> 
<textarea id="comment1" name="comment" type="text" placeholder="Комментарий"></textarea> 
<br/> 
<button type="submit" id="submit1" value="отправить" /> Записаться </button> 
</form>

Answer 1

[Ankhena]

Замените тут ширину на 100%

@media screen and (max-width: 736px)
main.css:1456
select {
    width: inherit;
    margin: 0 0 1% 0;
    padding: 1% 0 1% 2%;
}

Comments

[Андрей Филимонов]

Пробовал, не помогает

[Андрей Филимонов]

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

[Ankhena]

Андрей Филимонов: Я не туда посмотрела. В отладчике вылезал и сам select тоже.

В отладчике тыкайте на код, а не на сам сайт. (Сначала на селект, в коде выделится селект, его откройте и тыкните в нужный option).

Ширина option не регулируется в CSS. Используйте JS или готовые решения по кастомизации.

Answer 2

[Артур Карапетян]

Если Вы смотрите в девТулсах , тогда нечем удивлятся. На смартфонах select выглядит по-другому, он не выпадает.
Как Вариант

Answer 3

[tyzberd]

Никак, ширина выпадающего списка зависит от текста. Можете шрифт уменьшить, количество текста.
Или используйте не стандартный список.

Comments

[Андрей Филимонов]

шрифт не уменьшить, т.к. шрифт placeholder тоже уменьшится, а это нельзя

[tyzberd]

шрифт можно прописать только для option

Answer 4

[Андрей]

А в чем собственно проблема то? Открыл на айфоне у себя, отрабатывает select как и положено - стандартно, снизу появляется прокручивающийся список. Все хорошо с ним на мобильных устройствах.

Comments

[Андрей Филимонов]

да, на мобилных норм, на десктопе только так

Answer 5

[Саша]

Андрей Филимонов не на мобильных девайсах ошибка, а в браузере на десктопе.
на мобильных нативный селект отрабатывает, optionы в барабане.

пробуйте стилить option

Comments

[Андрей Филимонов]

да, на мобильном всплавающее окно со списком появляется