Не применяется стиль

136

28 октября 2019, 19:30

Не применяются два стиля для телефона. На ПК все работает. В режиме разработчика показывает, что стили применяются для телефона, а заходя на сайт через телефон эти два стиля не срабатывают. Задача: Нужно выровнять выбранное значения option в select.

text-align: center; - не работает для телефона
text-align-last: center; - не работает для телефона

Код выпадающего списка:

select { 
width: 221px; 
height: 60px; 
padding: 0 5px; 
position: relative; 
text-align-last: center; 
text-align: center; 
-ms-text-align-last: center; 
-moz-text-align-last: center; 
}

<div class="summary-select"> 
  <select name="razmer" onchange="this.form.submit();"> 
    <option value="37">Выберите размер</option> 
    <option class="tovarss" value="1-2 (46-48)" selected="">1-2 (46-48)</option> 
    <option class="tovarss" value="2-4 (50-52)">2-4 (50-52)</option> 
  </select> 
</div>

Answer 1

Это баг присутствует еще с 2010 года.

Если вы любитель радикальных решений, тогда добавьте немного JS:

function selectChange(el) { 
  document.querySelector('span').innerHTML = el.value 
}

div { 
  width: 221px; 
  position: relative; 
} 
 
select { 
  width: 100%; 
  height: 60px; 
  -webkit-appearance: none; 
  padding: 0 5px; 
} 
 
span { 
  background: #fff; 
  border: 1px solid #ccc; 
  border-radius: 6px; 
  line-height: 60px; 
  pointer-events: none; 
  text-align: center; 
  position: absolute; 
  top: 0; 
  right: 0; 
  left: 0; 
  bottom: 0; 
} 
 
select:focus+span { 
  background: #eee; 
}

<div class="summary-select"> 
  <select name="razmer" onchange="selectChange(this);"> 
    <option value="37">Выберите размер</option> 
    <option class="tovarss" value="1-2 (46-48)" selected="">1-2 (46-48)</option> 
    <option class="tovarss" value="2-4 (50-52)">2-4 (50-52)</option> 
  </select> 
  <span> 
      1-2 (46-48) 
  </span> 
</div>