CSS만 사용하여 입력 양식을 확인하는 세 가지 주요 유용한 기술

기법 1 : 입력 폼에 대한 백지 확인

「placeholder-showd」속성 사용

결과

세부

<input placeholder="Please enter a value.">
<button>save</button>

/*
Use opacity to reduce the initial transparency by half.
By using pointer-events, the initial button click is disabled.
*/
button {
    opacity: 0.5;
    pointer-events: none;
}

/*
Using not(:placeholder-shown), you can use
If you don't see the placeholder, you can use
Automatic setting of pointer-events.
Restore the opacity's transparency as well.
*/
input:not(:placeholder-shown) + button {
    opacity: 1;
    pointer-events: auto;
}

기법 2 : 입력 폼의 형식 확인

「유효하고 무효」속성 사용

결과

세부

<input type="email" placeholder="Enter email address">
<button>save</button>

/*
Using the invalid attribute, the
The background color if the type attribute format does apply.
*/
input:invalid {
  background-color: #ee6666;
}

/*
Using the valid attribute, the
The background color if the type attribute format does not apply.
*/
input:valid {
  background-color: #95f195;
}

기법 3 : 입력 폼의 범위 확인

"범위 내 및 범위 외" 속성 사용

결과

세부

<input type="number" min="1" max="20">
<button>save</button>

/*
Using the in-range attribute, the
The background color if it falls within a range of values.
*/
input:in-range {
  background-color: #95f195;
}
/*
Using the out-of-range attribute, you can use the
Background color if the value does not fall within a range of values.
*/
input:out-of-range {
  background-color: #ee6666;
}

링크