Safari Change Select Height

Safari change select height

Try adding this:

-webkit-appearance: menulist-button;

How to set height Or Padding in select box (dropdown box) for safari and chrome?

Did you try this CSS for your drop down?

overflow: hidden;
border: none;
outline: none;
-webkit-appearance: none;

For Safari you can try

-webkit-appearance: menulist-button;

so that width and height will work (link)

then you can use background,font-family,padding etc to further enchant your custom select tag. It worked for me in Safari/Chrome/FF ...

EDIT:

Editing option tag is not that easy. You can use the css below but everything is not customisable unfortunately

select option {
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}       

sources: 1,2

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

You can use this CSS property:

-webkit-appearance: none;

Note that this also causes the arrow icons to disappear. See the other answers for ways to add them back.

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

CSS Safari strange view on selectoption

The gradient you see comes from safari default style.

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

---

Read more about -webkit-appearance here

Safari not computing height: 100% on nested flexbox

I've worked around the problem by reducing the amount of markup between the things I'm aligning within the structure, and the outer container -

Basically eliminating the figure and figcaption so that the elements needing to be vertically aligned are siblings, and there are no wrappers in between to confuse Flexbox's height matching calculation.

Working code demo

select HTML element with height

I've used a few CSS hacks and targeted Chrome/Safari/Firefox/IE individually, as each browser renders selects a bit differently. I've tested on all browsers except IE.

For Safari/Chrome, set the height and line-height you want for your <select />.

For Firefox, we're going to kill Firefox's default padding and border, then set our own. Set padding to whatever you like.

For IE 8+, just like Chrome, we've set the height and line-height properties. These two media queries can be combined. But I kept it separate for demo purposes. So you can see what I'm doing.

Please note, for the height/line-height property to work in Chrome/Safari OSX, you must set the background to a custom value. I changed the color in my example.

Here's a jsFiddle of the below: http://jsfiddle.net/URgCB/4/

For the non-hack route, why not use a custom select plug-in via jQuery? Check out this: http://codepen.io/wallaceerick/pen/ctsCz

HTML:

<select>
    <option>Here's one option</option>
    <option>here's another option</option>
</select>

CSS:

@media screen and (-webkit-min-device-pixel-ratio:0) {  /*safari and chrome*/
    select {
        height:30px;
        line-height:30px;
        background:#f4f4f4;
    } 
}
select::-moz-focus-inner { /*Remove button padding in FF*/ 
    border: 0;
    padding: 0;
}
@-moz-document url-prefix() { /* targets Firefox only */
    select {
        padding: 15px 0!important;
    }
}        
@media screen\0 { /* IE Hacks: targets IE 8, 9 and 10 */        
    select {
        height:30px;
        line-height:30px;
    }     
}

bootstrap-select stretched on safari but looks normal on chrome

Resolved:

After inspecting the page I realised that it was being affected by the height being set at 100%.

I updated

.bootstrap-select .dropdown-toggle .filter-option {
    height:100%;
}

to

.bootstrap-select .dropdown-toggle .filter-option {
    height:auto!important;
} 

this did not affect the dropdown on chrome at all but resolved the issue on safari

---

Related Topics