Pure CSS Solution to Styling Specific <Select> Options in Webkit Based Browsers

CSS: Dropdown option text color not working on Mac OS X

Styling of <option> tags is not currently supported by WebKit browsers on Mac OS X. You may find some more ideas here: Pure CSS solution to styling specific <select> options in webkit based browsers?.

How to style the option of an html select element?

There are only a few style attributes that can be applied to an <option> element.

This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.

There are replacement plug-ins/libraries that look like a <select> but are actually composed of regular HTML elements that CAN be styled.

Styling input range for webkit with pure CSS

Interesting approach being used by the Ionic framework for styling the range input track with just CSS. They are adding a ::before pseudo-element to the ::-webkit-slider-thumb, making it as wide as possible and then positioning it on top of the track. (I couldn't get border-radius to work with it.)

input[type='range'] {  width: 210px;  height: 30px;  overflow: hidden;  cursor: pointer;}input[type='range'],input[type='range']::-webkit-slider-runnable-track,input[type='range']::-webkit-slider-thumb {  -webkit-appearance: none;}input[type='range']::-webkit-slider-runnable-track {  width: 200px;  height: 10px;  background: #AAA;}input[type='range']::-webkit-slider-thumb {  position: relative;  height: 30px;  width: 30px;  margin-top: -10px;  background: steelblue;  border-radius: 50%;  border: 2px solid white;}input[type='range']::-webkit-slider-thumb::before {  position: absolute;  content: '';  height: 10px; /* equal to height of runnable track */  width: 500px; /* make this bigger than the widest range input element */  left: -502px; /* this should be -2px - width */  top: 8px; /* don't change this */  background: #777;}

<div class="container">  <input type="range" min="0" max="100" value="10" /></div>

Styling a select element in Firefox

Since Firefox 35, "-moz-appearance:none" that you already wrote in your code, finally remove arrow button as desired.

It was a bug solved since that version.

How can I style an HTML select element in function of the number of options it has?

DEMO FIDDLE

CSS

select { 
    border: none;
    -webkit-appearance: none;
    font: inherit; 
}

select::-ms-expand {
    display: none;
}

select:focus {
    outline:none; 
    outline-offset:0; 
}

select > option {
    display:none; 
}

These select styles should only be applied to a <select> element with only one <option>

DEMO FIDDLE

jQuery

$('select').each(function(i, el) {
    if ($(el).children().length == 1) {
        $(el).css("display", "none"); // Hide it
        var optionVal = $(el).children().eq(0).text();
        $(el).after($("<span>" + optionVal + "</span>"));
    }
});

This will loop through every <select> on your page and then check if it has one option. If it does, it will hide the select and insert a span after.

What Safari-specific pure CSS hacks are out there?

I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.

FYI, this hack only targets Safari 3, and also targets Opera 9.

@media screen and (-webkit-min-device-pixel-ratio:0) {
   /* Safari 3.0 and Opera 9 rules here */
}

How to make CSS visible only for Opera

This hack works for the latest Opera:

 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
       #id {css rule}
 }

It doesn't touch any other browser as far as i tested, but this may be actual for several months, with web technologies boom etc.

---

Related Topics