Выберите стрелку, которая не отображается на iphone

Question

Ищете решение проблемы, которую у меня есть.

Я создаю отзывчивый веб-сайт, на котором есть тег select, позволяющий пользователям выбирать, какую категорию сообщений в блоге они хотят отображать html, это всего лишь базовый тег select.

<select name=""> 
    <option value="">Sort by Category</option> 
    <option value="">test</option> 
    <option value="">Test</option> 
</select> 

Я тогда стиль в выберите тег со следующим кодом

.portfolio-thumbs select { 
    width:100%; 
    padding:0.625em; 
    border:none; 
    background:#33c3e2; 
    color:#fff; 
    font-size:1.125em; 
} 

select { 
    -webkit-appearance: none; 
    border-radius: 0; 
} 

Это прекрасно работает на Windows Phone, но на Iphone, Blackberry и Android стрелки для выбора поле не отображается. Кто-нибудь столкнулся с этой проблемой раньше и узнал, что я делаю в своем CSS, чтобы отключить стрелку от отображения или иметь решение, чтобы вернуть стрелу, сохраняя при этом стиль стиля, который я хочу.

Answer 1

Строка -webkit-appearance: none; сообщает веб-браузеру (iPhone, BB и 'droid), чтобы не отображаться по умолчанию <select>. Удаление этой строки приведет к восстановлению стрелки.

Как упоминалось в комментариях, <select> - настоящая боль в стиле. Единственный реалистичный вариант, если вам нужен реальный контроль над тем, как он выглядит так, чтобы использовать технику замещения, упомянутую @AdamMarshal.

В качестве альтернативы, если вы абсолютно должны использовать <select> и -webkit-appearance: none;, добавьте фоновое изображение стрелки.