Question

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

但是如果select元素也有背景/边框样式，则将它们覆盖为“none”或“initial”不会得到预期的结果。

示例：

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”中的样式来自第三方库，因此我无法更改它们。但是我需要重置select元素在我的项目中的默认值（看第一张图片）。

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

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

Answer 1

您希望实施the revert keyword（可能the all property）。

情况并非如此，因此您必须删除select课程，并避免将reset置于原生<select>上（这也更有意义）。

“。select”中的样式来自第三方库，因此我无法更改它们。但是我需要重置select元素在我的项目中的默认值（看第一张图片）。

似乎你的项目不应该使用用户代理样式作为默认值。

Answer 2

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

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

$("#select1").removeClass("select");

＆＃13;

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

＆＃13;

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

＆＃13;

获取select元素的默认外观

2 个答案: