无输入时边框颜色更改

时间:2014-09-30 07:53:22

标签: html css

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

 <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;
}

我希望数字框为空时为紫色

1 个答案:

答案 0 :(得分:3)

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

但是,由于required属性已应用于<input>,因此您可以使用:invalid伪选择器:

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

JSFiddle

<强>文档