0

Here is the question similar to mine: Overriding css appearance value with its default value

But in the case if select element has also background/border styles, overriding them to "none" or "initial" doesn't get expected results.

Example:

HTML

<body>
    <select class="select reset">
        <option value="1">Option Value 1</option>
        <option value="2">Option Value 2</option>
    </select>
</body>

CSS

.reset {
    -webkit-appearance: none; 
    -moz-appearance:none;
    appearance:none;
    background: none;
    border: none;
}

.select {
    -webkit-appearance: menulist;
    -moz-appearance: menulist; 
    appearance: menulist;
    background: white;
    border: 2px solid #777;
}

THis is how select element looks without any styles: enter image description here

Then after it gets ".select" class: enter image description here

Styles within ".select" are coming from third-party library, so I cannot change them. But I need to reset how select element looks to its defaults in my project (look at the first picture).

This is what happens when I add ".reset" styles for that purpose: enter image description here

No borders, no background. And no default appearance)

4
  • 1
    Please add also html and explain what is expected and what is happening that you don't want to happen?
    – Esko
    Dec 27, 2017 at 13:34
  • Added more details Dec 27, 2017 at 13:51
  • Do you have any way to override the existing CSS ?
    – MatTheCat
    Jan 2, 2018 at 6:30
  • No, there is no way to do that. Jan 3, 2018 at 20:10

2 Answers 2

0

What you would like is the revert keyword (and probably the all property) to be implemented.

This is not the case yet so you'll have to remove your select class and avoid putting reset on native-looking <select> (this also makes more sense).


Styles within ".select" are coming from third-party library, so I cannot change them. But I need to reset how select element looks to its defaults in my project (look at the first picture).

Seems your project shouldn't use user-agent styles as default then.

2
  • I cannot remove "select" class, because it goes with third-party library. What I need is to override those styles to default values in my project. Dec 27, 2017 at 13:58
  • > Seems your project shouldn't use user-agent styles as default then.
    – MatTheCat
    Dec 27, 2017 at 14:02
0

The order of class definitions in your CSS is very important, you need to put the overriding one after the one that you want to be overridden.

Example:

.wrongreset {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
}

.select {
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
  background: white;
  border: 2px solid #777;
}

.reset {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
}
<select class="select">
  <option>12</option><option>345</option>
</select>

<select class="select reset">
  <option>abc</option><option>de</option>
</select>

<select class="select wrongreset">
  <option>$%</option><option>#!@</option>
</select>

Another approach is to use a library such as jQuery to remove unwanted CSS classes, so the browser default styles (whatever they are) will apply again:

$("#select1").removeClass("select");
.select {
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
  background: white;
  border: 2px solid #777;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="select1" class="select">
  <option>12</option><option>345</option>
</select>
<select id="select2" class="select">
  <option>abc</option><option>de</option>
</select>

3
  • I added more details. Issue is not with styles order (but yes, in my example it may seems so) Dec 27, 2017 at 13:54
  • I updated my answer, maybe the 2nd part can do what you need.
    – Peter B
    Dec 27, 2017 at 14:02
  • Second part works, but I won't use javascript for that. For me the question was about interesting behavior of css. And it seems that there is no solution) Anyway thanks Dec 27, 2017 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.