새로운 사용자 유효 및 사용자 무효 가상 클래스로 인해 양식 검증 UX가 개선되었습니다.

 

.input {
    border: 2px solid #ccc;
}

.input:user-invalid {
    border-color: #ff4444;
    animation: shake 0.3s;
}

.input:user-valid {
    border-color: #44ff44;
}

.error-message {
    display: none;
}

.input:user-invalid + .error-message {
    display: block;
}

 

 

웹학교 무료강좌 / 웹학교 컨텐츠몰

PHP포탈 / 구인구직 솔루션

By 웹학교