user3494073 user3494073 - 6 months ago 17
CSS Question

CSS3 appearance property normal not working in webkit browsers

The developers on the project I am working on have set the

-webkit-appearance: none;
on ALL the select boxes globally.

How would I go about overriding this and resetting it to its original state? I know I can just remove the code from the global setting but I would like to override it because I don't want it to effect the other code.

I tried:

-webkit-appearance:normal;


but it is not valid

Answer

For webkit browsers the only valid values for -webkit-appearance are in this list.

So to get back to the original state a select element you have to use:

-webkit-appearance:menulist;

Just include this CSS rule to the elements CSS you want to override the rule.

If you want all select elements to return to normal just add this to your CSS

select{
   -webkit-appearance:menulist;
}

DEMO

Comments