Overriding css appearance value with its default value

Question

I have integrated skel CSS framework with Bootstrap on a web template due to some missing components in the template that was originally build on skel and I had no other choice..

Bottom line..

All selectboxes are set as

{
  -webkit-appearance: none;
  appearance: none
}

in order to remove the select arrow and apply custom styling.

I have a select that I want to view as default and am trying to override the appearance and set it back to normal.

I tried

{
  -webkit-appearance: default;
  appearance: default
}

and

{
  -webkit-appearance: initial;
  appearance: initial`
}

but it ain't working.

How can I set back the original appearance of the select?

Answer 1

you can do it if you use appearance:menulist

Snippet:

.reset {
  -webkit-appearance: none; 
  -moz-appearance:none;
  appearance:none;
}
.select {
  -webkit-appearance: menulist;
  -moz-appearance: menulist; 
  appearance: menulist; 
}

<select class="reset select"></select>

See more about appearence and which values can it use here