当前位置：首页 > 文章列表 > 文章 > 前端 > 表单未填时如何设置不同样式

表单未填时如何设置不同样式

2026-01-01 08:39:37 0浏览收藏

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《CSS表单未填时如何显示不同样式》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

可使用 :placeholder-shown 伪类实现输入框为空时的样式变化，需配合 placeholder 属性，支持 Chrome 47+ 等现代浏览器，IE 不支持。

css表单未填写时显示不同样式怎么办_通过:placeholder-shown判断空状态

当表单输入框为空时，想让边框变红、背景变浅黄，或显示提示文字，可以利用 :placeholder-shown 伪类精准识别“未填写”状态——它只在输入框内容为空且 placeholder 可见时生效，比单纯用 :empty 或 JS 监听更轻量、更语义化。

前提：placeholder 必须存在

:placeholder-shown 的触发依赖于 input 或 textarea 元素设置了 placeholder 属性。即使 placeholder 内容为空字符串（placeholder=""），也能激活该伪类（部分浏览器支持，但建议写一个空格或有意义的占位符更稳妥）。

✅ 正确：<input placeholder="请输入姓名">
✅ 可用（兼容性稍弱）：<input placeholder="">
❌ 无效：<input>（无 placeholder 属性）

基础样式控制示例

直接对空状态应用样式，无需 JavaScript：

input:placeholder-shown {
  border-color: #ff6b6b;
  background-color: #fff8f0;
  outline: none;
}

input:not(:placeholder-shown) {
  border-color: #4CAF50;
  background-color: #ffffff;
}

这里用 :not(:placeholder-shown) 匹配“已输入内容”的状态，实现视觉反馈切换。

配合 required 属性增强语义

若字段为必填项，建议同时加 required 属性。这样 :placeholder-shown 与 :invalid:not(:placeholder-shown) 可组合使用，区分「空」和「填了但不合法」两种错误：

input:placeholder-shown → 空（初始态）
input:invalid:not(:placeholder-shown) → 已填但格式错（如邮箱少 @）
input:valid → 填写正确

例如邮箱输入框可这样分层提示：

input[type="email"]:placeholder-shown {
  border-color: #ccc;
}
input[type="email"]:invalid:not(:placeholder-shown) {
  border-color: #ff9800;
}
input[type="email"]:valid {
  border-color: #4CAF50;
}