無輸入時更改邊框顏色

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>的值將修改屬性，而不是attribute 。

但是，由於將required屬性應用於<input> ，因此可以使用:invalid偽選擇器：

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

JSFiddle

文獻資料

• :invalid