html - 使用默认值覆盖 css 外观值

Question

我已将 skel CSS 框架与 Bootstrap 集成到 Web 模板中，因为模板中缺少一些最初构建于 skel 上的组件我别无选择..

底线..

所有选择框都设置为

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

为了移除选择箭头并应用自定义样式。

我有一个选择，我想将其视为默认值，我正在尝试覆盖 appearance 并将其设置回正常状态。

我试过了

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

和

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

但它不起作用。

如何恢复选择的原始外观？

Answer 1

如果你使用appearance:menulist就可以做到这一点

片段:

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

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

查看更多关于 appearence 以及它可以使用哪些值 here