problem with <select> and :after with CSS in WebKit

html css select
Nicolas Merouze picture Nicolas Merouze · Aug 20, 2010 · Viewed 174.1k times · Source

I would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML:

<select name="">
  <option value="">Test</option>
</select>

And it doesn't work. I don't know why and I didn't find the answer in the W3C specs. Here's the CSS:

select {
  -webkit-appearance: none;
  background: black;
  border: none;
  border-radius: 0;
  color: white;
}

select:after {
  content: " ";
  display: inline-block;
  width: 24px; height: 24px;
  background: blue;
}

So is it normal or is there a trick?

Answer

David says reinstate Monica picture David says reinstate Monica · Aug 20, 2010

I haven't checked this extensively, but I'm under the impression that this isn't (yet?) possible, due to the way in which select elements are generated by the OS on which the browser runs, rather than the browser itself.

Related questions

How to indent multiple levels of select optgroup with CSS?

Just trying to indent optgroup blocks by nesting depth really, I've tried a general margin-left rule, nested elements then trying to apply the same rule, tried padding-left... is indenting like this possible? It seems elementary :P In the example below, …

Read More
HTML Select tag show vertical scroll with 10 option

I want to make a select box like this with 10 select option, when I try to add more than 15 option it show vertical scroll bar, but not show when it have 10 option. is there any way to achieve this.

Read More
Is there a way to select an open select box in css?

I set a background image (arrow down) to a select box after setting the webkit-appearance attribute to none. When the option list is opened I want to display another background image (arrow up). Is there a pseudo class or something …

Read More