입력 할 때 테두리 색이 변경됩니다.

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{ 
    border:1px solid red; 
} 
input:invalid { 
    border: 1px solid purple; 
} 

JSFiddle

문서

• :invalid
: 당신이 :invalid 의사 선택의 사용을 할 수 있습니다 당신은 required 속성은 그러나 당신의 <input>에 적용한 이후

,