取回选择元素的默认外观答案

【问题标题】：Get back default appearence for select element取回选择元素的默认外观
【发布时间】：2017-12-27 13:32:26
【问题描述】：

这是和我类似的问题： Overriding css appearance value with its default value

但如果选择元素也有背景/边框样式，将它们覆盖为“无”或“初始”不会得到预期的结果。

例子：

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;
}

这是没有任何样式的 select 元素的外观：

然后在它获得“.select”类之后：

“.select”中的样式来自第三方库，所以我无法更改它们。但是我需要在我的项目中将选择元素的外观重置为默认值（看第一张图片）。

当我为此添加“.reset”样式时会发生这种情况：

没有边框，没有背景。并且没有默认外观）

【问题讨论】：

请同时添加 html 并解释预期发生的事情以及您不希望发生的事情？
添加了更多细节
你有什么办法覆盖现有的 CSS 吗？
不，没有办法。

标签： css

【解决方案1】：

您希望实现the revert keyword（可能还有the all property）。

现在还不是这样，因此您必须删除您的 select 类，并避免将 reset 放在看起来像原生的 <select> 上（这也更有意义）。

“.select”中的样式来自第三方库，所以我无法更改它们。但是我需要在我的项目中将选择元素的外观重置为默认值（看第一张图片）。

看来你的项目不应该默认使用用户代理样式。

【讨论】：

我无法删除“选择”类，因为它与第三方库一起使用。我需要的是在我的项目中将这些样式覆盖为默认值。
> 看来你的项目不应该默认使用用户代理样式。

【解决方案2】：

CSS 中类定义的顺序非常重要，您需要将覆盖的顺序放在要覆盖的顺序之后。

例子：

.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>

另一种方法是使用 jQuery 等库来删除不需要的 CSS 类，因此浏览器默认样式（无论它们是什么）将再次应用：

$("#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>

【讨论】：

我添加了更多细节。问题不在于样式顺序（但是是的，在我的示例中可能看起来如此）
我更新了我的答案，也许第二部分可以做你需要的。
第二部分有效，但我不会为此使用 javascript。对我来说，问题是关于 CSS 的有趣行为。而且似乎没有解决方案）无论如何谢谢