咨询：未填写的必填input/textarea边框对应的CSS选择器

嘿，这个问题我太熟悉了！浏览器自带的必填字段验证样式确实很容易破坏自定义的表单设计，尤其是你只想保留底部边框的场景。

问题的核心是：当必填字段（带required属性）未通过验证时（比如空着没填），浏览器会给它的:invalid状态添加默认的红色边框/轮廓样式，直接覆盖了你设置的border-bottom。要解决这个，我们需要精准选中未填写、未聚焦的必填无效项，然后覆盖掉默认样式。

具体解决方案 #

用这个组合选择器就能精准定位目标元素：:required:invalid:not(:focus)，然后给它设置你想要的底部边框，同时清除浏览器的默认无效样式。

示例代码如下：

/* 基础样式：仅保留底部边框，清除默认边框和轮廓 */
input, textarea {
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
}

/* 针对未填写的必填项（未聚焦状态），设置红色底部边框 */
input:required:invalid:not(:focus),
textarea:required:invalid:not(:focus) {
  border-bottom: 1px solid #dc3545; /* 自定义红色，可根据需求调整 */
  /* 清除浏览器默认的无效状态样式（部分浏览器用box-shadow或outline） */
  box-shadow: none;
  outline: none;
}

/* 可选：聚焦时的样式，保持交互一致性 */
input:focus, textarea:focus {
  border-bottom: 1px solid #0d6efd; /* 聚焦时的高亮色 */
}

选择器说明 #

• :required：筛选出所有带required属性的输入框/文本域
• :invalid：选中未通过验证的元素（这里就是空的必填项，因为必填项为空时验证不通过）
• :not(:focus)：排除正在被用户聚焦的元素——毕竟用户正在输入时，红色边框会显得很不友好，这个规则能让用户输入时看不到红色，只有离开输入框且未填写时才触发样式

这样设置后，既保留了你想要的仅底部边框的设计，又能在用户未填写必填项时给出清晰的红色底部提示，同时不会出现丑陋的四周红色边框啦！

内容的提问来源于stack exchange，提问作者blaze-rowland