How to remove gloss effect on safari mobile

Question

I noticed the color of select controls are wrong with safari for mobiles.

There's a gloss like this question mentioned.

Unfortunately, the solution removes also the little arrow at the right.

Is there an other way than -webkit-appearance:none; to override only the color.

Thank you

Have you tried `-webkit-appearance:caret;`? ( http://www.shauninman.com/archive/2010/04/22/disable_the_default_inner_shadow_of_search_inputs_on_the_ipad ) — RaphaelDDL, May 16 '13 at 17:09
You could try this then: http://stackoverflow.com/questions/15623389/dissappearing-arrow-and-styling-on-select-element-in-safari-on-ios Seems that can't remove styling while keeping arrow so you gotta make one by yourself. — RaphaelDDL, May 16 '13 at 17:17
I was trying to avoid this solution. Can you write this as an answer so I can accept it if there's no other way. Thank you — Marc, May 16 '13 at 17:55

score 3 · Accepted Answer · edited May 23 '17 at 12:17

Supposedly, -webkit-appearance:caret; should've remove the gloss. But seems does not work in selects.

Therefore, the only way I could find was the same of the Florija's answer, which is faking the select arrow via CSS.

HTML:

<select name="state_select" id="state_select" class="choose_state" size="1">
    <option>Hey</option>
</select>
<div class="dblarrow"><b></b><i></i></div>

CSS:

.dblarrow {
    margin-left: -35px;
    display: inline-block;
}

.dblarrow b {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
    display: block;
    margin-bottom: 3px;
}

.dblarrow i {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    display: block;
}

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;
    margin-right: 15px;
    font-size: 1.4em;
    padding-right: 20px; /*Important*/
    display: inline-block; /*Important*/
}

Check out his pen: http://codepen.io/loredonut/pen/xvtHG

How to remove gloss effect on safari mobile

1 Answers1