Стиль HTML select tag на ios/safari/iPhone

У меня есть три раскрывающихся списка (три элемента <select>). Я написал их с помощью css:Стиль HTML select tag на ios/safari/iPhone

.dropdown{ 
    font-size: 20px; 
    background: white; 
    border:none; 
    position: relative; 
}

В хром они выглядят отлично. Однако, когда я проверить сайт на моем iPhone 6s (СВН 10.2.1) на Safari результат немного отличается, как показано на рисунке:

Как вы можете видеть, что есть gradient в background и вблизи стрелки background является black.

Как стилизовать <select> элементы, так что я бы фон white КСН либо?

источник

2017-02-10 Alin Crescens Ciurea

Вы можете использовать http://stackoverflow.com/a/33126467/4042468 и установить CSS для вашего HTML. – kerry

@kerry Я не понимаю, как это мне поможет. Можете ли вы объяснить свое обходное решение? –

Извинения, неверно сформулируйте ваш вопрос – kerry

As Stian Martinsen suggested-webkit-appearance: none; отключить по умолчанию стилизацию <select>, но также скрывает стрелку. Так что найти обходной путь с этим кодом:

.dropdown{ 
 
    \t \t font-size: 20px; 
 
    \t \t background: white; 
 
    \t \t border:none; 
 
    \t \t position: relative; 
 
    \t \t -webkit-appearance: none; 
 
     padding-right: 10px; 
 
    \t } 
 
    \t .dropdown:focus{ 
 
    \t \t outline: none; 
 
    \t } 
 
    \t .plain-selector{ 
 
    \t \t margin: 0 3px; 
 
    \t } 
 
    \t .plain-selector::after{ 
 
\t \t content: ""; 
 
\t  position: absolute; 
 
\t  z-index: 2; 
 
\t  bottom: 30%; 
 
\t  margin-top: -3px; 
 
\t  height: 0; 
 
\t  width: 0; 
 
\t  right: 0; 
 
\t  border-top: 6px solid black; 
 
\t  border-left: 6px solid transparent; 
 
\t  border-right: 6px solid transparent; 
 
\t  pointer-events: none; 
 
    \t } 
 
    \t .plain-selector::before{ 
 
\t \t content: ""; 
 
\t  position: absolute; 
 
\t  z-index: 2; 
 
\t  top: 30%; 
 
\t  margin-top: -3px; 
 
\t  height: 0; 
 
\t  width: 0; 
 
\t  right: 0; 
 
\t  border-bottom: 6px solid black; 
 
\t  border-left: 6px solid transparent; 
 
\t  border-right: 6px solid transparent; 
 
\t  pointer-events: none; 
 
    \t } 
 
    \t .out-selector{ 
 
    \t \t position: relative; 
 
    \t } 
 
    .outter-selection{ 
 
     \t width: 100%; 
 
    } 
 
    .selection{ 
 
    \t display: block; 
 
    \t margin: auto; 
 
    \t border-radius: 50px; 
 
    \t background: white; 
 
    \t padding: 5px; 
 
    \t max-width: 360px; 
 
    \t text-align: center; 
 
    \t width: 90%; 
 
    \t position: relative; 
 
} 
 
body{ 
 
    \t \t margin-top: 4em; 
 
    \t \t background: #2f2f2f; 
 
    \t \t color: white; 
 
    \t \t font-size: 23px; 
 
    \t }

<div class="outter-selection"> 
 
\t <div class="selection"> 
 
\t \t <span class="out-selector"><span class="plain-selector"><select class="dropdown"> 
 
\t \t \t <option value="1" selected="selected">select 1</option> 
 
\t \t \t <option value="2">select 2</option> 
 
\t \t \t <option value="3">select 3</option> 
 
\t \t \t <option value="4">select 4</option> 
 
\t \t </select></span></span> 
 
\t \t <span class="out-selector"><span class="plain-selector"><select class="dropdown"> 
 
      <option value="1" selected="selected">1</option> 
 
\t \t \t <option value="2">2</option> 
 
\t \t \t <option value="3">3</option> 
 
\t \t \t <option value="4">4</option> 
 
      </select></span></span> 
 
\t \t <span class="out-selector"><span class="plain-selector"><select class="dropdown"> 
 
      <option value="1" selected="selected">1</option> 
 
\t \t \t <option value="2">2</option> 
 
\t \t \t <option value="3">3</option> 
 
\t \t \t <option value="4">4</option> 
 
      </select></span></span> 
 
\t </div> 
 
</div>

источник

2017-02-10 12:12:18

Попробуйте добавить этот CSS, чтобы отключить Иос по умолчанию стиля:

-webkit-appearance: none;

Это также будет работать и на других элементах, которые получают специальный стиль, как входной [типа = поиск].

источник

2017-02-10 11:19:11

В дополнение к этому отвечу также обратите внимание: '' 'на другие элементы' html'. Опять же, у вас есть несколько вариантов. –

@StianMartinsen, который также скроет стрелу, которая не то, что я хотел. Итак, есть ли способ обхода стрелы? –

ответ

Смежные вопросы