As noted in Scott O'Hara's article , setting background color on the select (though not background image as I've used here, can cause option elements to inherit background colors as well, which can cause problems. Thanks, but I'm getting varying results. This demo page is related to the article Styling form controls with CSS, revisited. By default, most of the browser highlights the selected text in blue background.
Add your desired background color to the "background-color" property. A pure CSS3 styling solution (no JavaScript) described in the tip is applicable to HTML5 SELECT elements and ASP.NET DropDownList controls. Introduction. Type your selected color's numeric code followed by a semicolon next to the "background-color:" element to do so. background-color:red; or background-color:#FF0000; works fine too, but cannot use background-color:transparent nor background-color:rgba(0,0,0,0); - then the background color turns to default (whiteish, I guess) The optgroup label will still have a black background, but the options will be the specified background-color Conclusion As noted above the table, it’s probably better to leave styling of select boxes, optgroup and options alone and just leave them as the defaults because cross browser styling is so inconsistent it’s not worth the bother. In Safari and other WebKit-based browsers, you can use WebKit transitions to smoothly animate changes in CSS properties. For our next example, let’s change the background color of the running total box. Currently browsers only support a small subset of CSS properties for ::selection pseudo-element like color , background-color and text-shadow . Styling multiple selection menu controls (select elements) with CSS. However you can override this setting with the CSS ::selection pseudo-element . input.text, select.select { border: 1px solid #222; background: #fff; } Reload one more time, and we’ve got our new borders. .select-style select option to the css, to change the font and the color of the options. The problem I'm having is that when viewing my select dropdowns on mobile/iphone in particular, the native safari …
Each multiple selection menu control consists of this HTML: