html - 无输入时边框颜色变化

Question

我有一个代码，我想要，如果没有输入，边框颜色是蓝色。我有这个:

 <fieldset>
    <label>Number</label>
    <input type="number" value="1" max="10" min="1" step="1" required>
</fieldset>

和

input:out-of-range {
 border: solid red 1px;
 }
input[value=""] {
border: solid purple 1px;
}

我希望数字框在空的时候是紫色的

Answer 1

您不能以这种方式使用属性选择器。更改 <input> s 值将修改 property, not the attribute .

既然你有 required应用于您的 <input> 的属性但是，您可以使用 :invalid伪选择器:

input{
    border:1px solid red;
}
input:invalid {
    border: 1px solid purple;
}

JSFiddle

文档

• > :invalid