在CSS中怎样利用:valid伪类实现带打勾图标的输入框-css教程-PHP中文网

:valid单独作用于普通input无反应，因浏览器仅在用户输入后校验且空值不匹配；未设type或pattern时输入框恒有效，需指定语义化type或pattern并配合required才能激活校验。

在css中怎样利用:valid伪类实现带打勾图标的输入框

为什么`:valid`单独用在普通`<input>`上没反应

因为浏览器默认只在用户**输入过内容后**才开始校验，空值时:valid不匹配（哪怕required未触发）。更关键的是：没有设置type或pattern等约束时，输入框永远被视为“有效”——:valid恒为真，但你根本看不到变化。

实操建议：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须指定语义化 type（如 email、url、number）或添加 pattern 属性，否则校验逻辑不激活
搭配 required 使用，确保空值能被识别为 :invalid，形成状态对比
避免依赖 :valid 判断“是否已填”，它反映的是“是否符合规则”，不是“是否非空”

用`::after`伪元素加打勾图标要绕开哪些坑

:valid 本身不能直接插入内容，必须配合 ::after 或 ::before。但默认情况下，<input> 是替换元素，不支持伪元素——得先把它变成可容纳伪元素的容器。

实操建议：

给 <input> 设置 position: relative，再让 ::after 绝对定位到右边界
图标用 content: "✓" 最轻量，避免额外字体或 SVG 请求；若需更精细控制，可用 background-image 引入小 PNG/SVG
务必加 pointer-events: none 到 ::after，否则图标会拦截鼠标事件，导致输入框失焦
别忘了用 transition 平滑显示/隐藏，比如 opacity 0.2s，否则图标突显突隐很生硬

`:valid` + `::after` 的完整 CSS 写法示例

下面这段代码能直接复用，适配邮箱输入框：

input[type="email"]:valid {
  padding-right: 28px;
}
input[type="email"]:valid::after {
  content: "✓";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #4caf50;
  font-size: 16px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s;
}
input[type="email"]:invalid:not(:placeholder-shown)::after {
  opacity: 0;
}

注意：:not(:placeholder-shown) 是关键，它排除了 placeholder 还在显示时的误判——否则刚聚焦就闪一下勾，体验很差。