边框颜色变化没有输入

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>的值将修改property, not the attribute。

既然你已申请但你<input>的required属性，你可以使用:invalid伪选择的：

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

JSFiddle

文档

• :invalid