CSS/HTML中如何隐藏fieldset元素的左右两侧边框

你写的border: 1px 0 1px 0不生效，核心问题有两个：一是border简写如果只写宽度值、不指定边框样式（solid/dashed这类），浏览器会默认把边框样式设为none，等于所有边框都藏起来了；二是fieldset属于表单特殊元素，各个浏览器都自带默认的内置边框样式，很容易盖过你写的自定义规则。

可直接复用的代码 #

写法1（最推荐，不容易出问题） #

直接清掉默认边框后单独加上下边框，逻辑最清晰，不会有解析兼容问题：

fieldset {
  /* 先清掉浏览器给fieldset加的默认边框 */
  border: none;
  /* 单独设置上下边框，宽度、线型、颜色可以按需改 */
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

写法2（简写版） #

如果想用简写少写几行代码，一定要单独声明边框线型：

fieldset {
  /* 上下边框宽1px，左右宽度为0 */
  border-width: 1px 0;
  /* 这行不能少，不写线型所有边框都不会显示 */
  border-style: solid;
  /* 自定义边框颜色，不写默认和文字颜色一致 */
  border-color: #ccc;
}

常见踩坑提醒 #

• 写完样式没效果的话，直接按F12打开开发者工具，选中对应的fieldset元素看「计算样式」面板，就能查到是不是有其他优先级更高的CSS把你的样式覆盖了
• 不止fieldset，所有元素写border简写的时候，只要没明确写线型，都可能出现边框不显示的问题，别漏这个属性

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