Firefox开发者版输入框仍显边框问题求助

我想让input元素完全无边框，已经移除了border、设置border-width为0、移除outline，但Firefox开发者版仍显示各边2px边框，这是为什么？

相关截图 #

• Firefox浏览器界面截图：
  
• Firefox调试器界面截图：
  
• Chrome中同一元素截图：
  

应用于.quest__form-default的代码 #

.quest__form-default {
  display: block;
  position: absolute;
  top: 20px;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  border: 0;
  outline: 0;
  border-width: 0px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

这是Firefox对隐藏状态下表单元素的默认样式渲染问题。你用clip: rect(0, 0, 0, 0)和极小尺寸把元素藏起来，但Firefox仍会为这类“不可见但未完全移除”的表单控件保留默认边框样式，哪怕你显式设置了border: 0。

给你几个可行的解决办法：

1. 禁用浏览器默认表单样式：添加appearance属性强制覆盖浏览器的默认控件样式，针对Firefox加上前缀：

.quest__form-default {
  /* 保留原有样式 */
  appearance: none;
  -moz-appearance: none;
}

2. 用现代属性替代旧的clip方法：clip: rect()是比较老旧的属性，换成clip-path: inset(50%)能更可靠地隐藏元素，同时避免浏览器的特殊渲染：

.quest__form-default {
  display: block;
  position: absolute;
  top: 20px;
  clip-path: inset(50%); /* 替换原clip属性 */
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  outline: 0;
  appearance: none;
  -moz-appearance: none;
}

3. 检查调试器的浏览器样式：打开Firefox调试器的“浏览器样式”面板，确认是否有默认的border或box-shadow被强制应用。如果有，用更高优先级的选择器覆盖（比如直接选中input元素：input.quest__form-default { border: 0 !important; }，但!important尽量少用，优先调整选择器权重）。

内容的提问来源于stack exchange，提问作者metiran