How to Remove the Gloss on a Select Element in Safari on MAC

How can I remove the gloss on a select element in Safari on Mac?

@beanland; You have to write

-webkit-appearance:none;

in your css.

read this http://trentwalton.com/2010/07/14/css-webkit-appearance/

How to remove gloss effect on safari mobile

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

CSS Safari strange view on select option

The gradient you see comes from safari default style.

You can remove it with -webkit-appearance:none;

---

Read more about -webkit-appearance here

How To Change Select Box Background Without Losing the Right Arrow on Mobile Safari

You are not going to find a good cross-browser implementation for styling the select element via CSS. The better solution is to create your own dropdown via javascript and style those elements uniformly across all browsers.

select html tag wont visible same in chrome and safari

You can use appearance-none which is a class in tailwindCSS that removes any browser specific styling.

Resource: https://tailwindcss.com/docs/appearance

---

Related Topics