Question

我想要一个默认的Firefox选择框，但不幸的是我有一个CSS指令（我无法更改或删除），它为所有select元素提供了背景和边框。这使得Firefox将漂亮的默认控件转换为丑陋的平方控件。有没有办法删除/恢复这些说明？

select {
    background-color: white;
    border: 1px solid black;
}

我尝试使用none，auto和inherit覆盖此定义，但它们没有入侵效果。

Answer 1

从forms.css，这些是Firefox的默认样式：

select {
  margin: 0;
  border-color: ThreeDFace;
  background-color: -moz-Field;
  color: -moz-FieldText;
  font: -moz-list;
  line-height: normal !important;
  white-space: nowrap !important;
  text-align: start; 
  cursor: default;
  -moz-box-sizing: border-box;
  -moz-user-select: none;
  -moz-appearance: menulist;
  border-width: 2px;
  border-style: inset;
  text-indent: 0;
  overflow: -moz-hidden-unscrollable;
}

您可以尝试重新指定相关样式，但是您可能需要为不同的浏览器指定不同的属性值。

Answer 2

您是否尝试将！important关键字添加到覆盖样式中？

Answer 3

尝试：

select {
    background: none !important;
    border: 0 !important;
}

将CSS样式表单元素还原为默认浏览器样式

3 个答案: