我明白你的需求：想要一个默认无边框的input，当它聚焦或者未聚焦但已有文本内容时，显示蓝色边框。你之前尝试的:focus, :not(:focus):valid选择器没达到预期，核心原因是:valid伪类的触发逻辑和你想的不一样。

为什么之前的选择器失效？ #

:valid是基于表单验证规则的——如果你的input没有设置required、pattern这类验证条件，空的input也会被判定为valid。这就导致.Input:not(:focus):valid会一直生效，不管输入框有没有内容，自然不符合你的需求。

正确的解决方案：使用:placeholder-shown伪类 #

我们可以利用:placeholder-shown来判断输入框是否为空：当输入框有内容时，占位符会隐藏，此时:placeholder-shown不匹配；反之空的时候匹配。结合这个特性就能精准实现你的需求。

示例代码：

HTML部分

<input class="Input" placeholder="" type="text">

注意：必须给input设置placeholder（哪怕是空字符串），否则:placeholder-shown伪类不会生效。

CSS部分

.Input {
  border: none;
  outline: none;
  padding: 8px 10px; /* 可选：添加内边距提升输入体验 */
  font-size: 16px;
}

/* 聚焦时显示蓝色边框 */
.Input:focus {
  border: 2px solid #007bff; /* 你可以自定义蓝色的色值 */
}

/* 未聚焦但有内容时显示蓝色边框 */
.Input:not(:focus):not(:placeholder-shown) {
  border: 2px solid #007bff;
}

原理说明 #

• :not(:focus)：排除聚焦状态的情况
• :not(:placeholder-shown)：匹配输入框有内容（占位符已隐藏）的情况
  两者结合就精准命中了“未聚焦且有内容”的场景，加上:focus的规则，就完全实现了你要的效果。

如果你的input有required属性，也可以用:invalid来辅助，但:placeholder-shown的方案更通用，不管有没有验证规则都能生效。

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