Input 태그에서 비밀번호를 잘 못 입력했거나, focus가 된 경우, input창의 밑줄 색이 바뀌는 것을 많이 봤을 것이다.

해당 효과를 구현해 보고 정리 해보고자 한다.

//1. 먼저 input태그의 스타일을 정한다.
.input {
	border-bottom: 1px solid black;
-webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

input:focus{
	outline:none;
    border-bottom: 1px solid #2d3d8b;
}

//여기서 invalid는 validation이 실패 했을 경우 input에 추가되는 클래스명이다.
.invalid:not(:focus) {  //즉, invalid가 포커스 되지 않은 상황에 red로 바꾸는 것.
    border-bottom: 1px solid red;
}

//그냥 invalid에 효과를 주면 안되나? 라고 생각 할 수 있지만, 
//여러 클래스를 가진 태그(<input className="input invalid">)에 
//같은 속성(border-bottom)을 여러 클래스(input, invalid)에서 다른 값을 주게 되면 
//앞의 것만 인식을 하게 된다. 

//그러므로 위의 방식처럼 하거나, 
//invalid가 추가될때 기존의 것을 삭제 시켜줘야 하는데, 그렇게 되면 input의 css가 깨질 수 있기에
//위의 방식으로 하자