CSS :valid伪类与非必填输入框样式触发异常问题求助

问题核心：非必填输入框未填写时，浏览器默认判定其为valid状态，导致页面加载后就触发了仅应在填值后显示的样式。

解决方案 #

通过结合CSS伪类:not(:placeholder-shown)和:valid，仅当输入框已填写内容且验证有效时，才应用目标样式。具体步骤如下：

1. 给非必填输入框添加占位符
   给所有非必填的<input>和<textarea>添加placeholder属性（可以设为空格，避免显示占位文本），让浏览器能通过:placeholder-shown识别输入框是否为空。

2. 修改CSS选择器
   将原CSS中所有仅使用:valid的选择器，替换为:not(:placeholder-shown):valid，区分空的非必填字段和已填写的有效字段。

修改后的代码 #

HTML部分（仅修改非必填字段）

<!-- 非必填电话输入框添加placeholder -->
<div class="input-data input-data narrow">
    <input type="text" id="phone" maxlength="14" name="phone" placeholder=" ">
    <div class="underline"></div>
    <label for="phone">Telefone</label>
</div>

<!-- 非必填日期输入框添加placeholder -->
<div class="input-data">
    <input type="date" name="demissao" placeholder=" ">
    <div class="underline"></div>
    <label for="demissao">Demissão</label>
</div>

CSS部分（修改所有:valid相关选择器）

/* 替换原有的select:valid相关选择器 */
.select-container select:focus ~ .underline:before,
.select-container select:not(:placeholder-shown):valid ~ .underline:before {
  transform: scale(1);
}

/* 替换原有的input/textarea:valid相关选择器 */
.input-data select:focus ~ label, .textarea textarea:focus ~ label,
.input-data select:not(:placeholder-shown):valid ~ label, .textarea textarea:not(:placeholder-shown):valid ~ label,
.input-data input:focus ~ label, .textarea textarea:focus ~ label,
.input-data input:not(:placeholder-shown):valid ~ label, .textarea textarea:not(:placeholder-shown):valid ~ label{
  transform: translateY(-20px);
  font-size: 14px;
  color: #3498db;
}

.input-data input:focus ~ .underline:before,
.input-data input:not(:placeholder-shown):valid ~ .underline:before,
.textarea textarea:focus ~ .underline:before,
.textarea textarea:not(:placeholder-shown):valid ~ .underline:before{
  transform: scale(1);
}

select:focus ~ label, select:not(:placeholder-shown):valid ~ label {
  transform: translateY(-20px);
  font-size: 14px;
}

/* 修改date输入框的valid样式触发条件 */
input[type=date]:not(:placeholder-shown):valid::-webkit-datetime-edit{ color: #000; }
input[type=date]:not(:placeholder-shown):valid{ color: #000; }

补充说明 #

• 对于必填字段（带required属性），无需修改，因为:valid仅在填写有效内容后触发，空值会被:invalid匹配，符合原有逻辑。
• 使用placeholder=" "而非空字符串，是为了兼容部分浏览器对空占位符的:placeholder-shown判定差异，确保空输入框能被正确识别。

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