Dissappearing arrow and styling on <select> element in Safari on iOS
Solution 1
If you tell webkit to remove all default styling, it will remove it, also the arrow (in iOS). You will have to create a arrow and shift it over the select field.
I made this pen, include everything with .dblarrow
(CSS and HTML) and add styles marked with /*Important*/
.
Solution 2
A very late answer but a little trick for people.
The code below keep the select transparent on desktop but let the default select style on iOS.
select {
background: rgba(0, 0, 0, 0.005);
}
Patrick Moore
Updated on June 04, 2022Comments
-
Patrick Moore almost 2 years
I am finding when I style elements (specifically, with
background: transparent
), the arrow is missing in Safari on iOS. Have any of you experienced this or know why it's hiding the browser chrome? Can I use conditional statements to apply CSS just for Safari on iOS (without JS)?The device is running iOS 6.1.2.
here is a screenshot on Safari in iOS (iPad2):
Here is a screenshot on Safari (desktop, Windows 7, same for all other desktop browsers):
CSS:
select.choose_state, select.choose_state option { background: transparent; } select.choose_state { border: 1px solid #000; -webkit-appearance: none; -webkit-border-radius: 0px; outline: none; float: right; position: relative; top: 35px; margin-right: 15px; font-size: 1.4em; }
HTML:
<select name="state_select" id="state_select" class="choose_state" size="1">[...]</select>
-
Patrick Moore about 11 yearsThanks! I had to apply some conditional formatting so the extra arrows are visible only in Safari, but this worked.
-
TaouBen over 3 yearsweird & incorrect! it is surely a problem with your screen, If I do this in my device, I will see a light dark background like a shadow ! it is not 100% transparent