将 CSS 样式的表单元素恢复为默认浏览器样式

Posted 2023-03-06

【中文标题】将 CSS 样式的表单元素恢复为默认浏览器样式

【英文标题】：Reverting a CSS styled form element back to default browser style

【发布时间】：2010-12-03 21:14:50

【问题描述】：

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

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

我尝试用none、auto 和inherit 覆盖此定义，但它们没有达到预期效果。

【参考方案1】：

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

【参考方案2】：

试试：

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

【讨论】：

您能直接在此处发布指向页面或 html/CSS（相关部分）的链接吗？

【参考方案3】：

来自 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;

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

【讨论】：

试过了。该框现在看起来更默认，但仍然具有方形外观。将所有指令设置为 !important

的事件

你能提供一个演示吗？