使用JS和CSS:不是伪类

输入{ 字体大小:13 px; 填充:5 px; 宽度:100 px; ｝ 输入(value = " ") { 边框:2px实体#fa0000; ｝ 输入:没有((value = " ")) { 边框:2px实体#fafa00; ｝ <input type="text" onkeyup="this. "setAttribute('value'， this.value);" value="" /> . setAttribute('value'， this.value);

在HTML部分这样做:

<input type="text" name="Example" placeholder="Example" required/>

为了有效，必需的参数将要求它在输入字段中有文本。

简单的css:

input[value]:not([value=""])

如果输入被填满，这段代码将在页面加载上应用给定的css。

使用属性占位符和伪类占位符-显示是检测输入是否有文本的正确方法。

例子:

<input type="email" placeholder=" " required>
<label>Email</label>

input:focus ~ label,
input:not(:placeholder-shown) ~ label
{
  top : -4em
  left : -0.2em
  font-size : 0.9em
}

使用JS和CSS:不是伪类

输入{ 字体大小:13 px; 填充:5 px; 宽度:100 px; ｝ 输入(value = " ") { 边框:2px实体#fa0000; ｝ 输入:没有((value = " ")) { 边框:2px实体#fafa00; ｝ <input type="text" onkeyup="this. "setAttribute('value'， this.value);" value="" /> . setAttribute('value'， this.value);

基本上每个人都在寻找的是:

少:

input:focus:required{
    &:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
    &:valid,
    &:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
}

纯CSS:

input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
input:focus:required:valid,
input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}