Dissappearing arrow and styling on <select> element in Safari on iOS
css, ios, ipad, safari
Solution
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*/`.
Problem
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>`