[ HTML + CSS ] 심심해서 만들어본 커스텀 input

한 번 만들어봐야지 생각만 하고 있다가 갑자기 삘이 와서 만들어봤다. 우선 결과물은 아래와 같다. 참고로 태그명으로 직접 접근해서 나중에 쓸때는 클래스명을 주던가 해야한다. 

약간 생각해야 했던 부분은 transition 상태 유지였다. input 태그에 글자가 있으면 효과가 유지돼야 하는데 이를 어떻게 구현할 수 있을까?

 

valid 가상클래스를 활용하면 된다. 나도 이번에 처음 알게된건데 valid는 input 태그가 유효한지 판별해주는 가상클래스다. 가령 email인 경우 input 타입이 'email'이면 HTML이 스스로 유효성 검사를 해준다.

 

내가 구현하고자 했던 것은 글자가 하나라도 있으면 스타일을 유지하는 것이기 때문에 단순히 input 태그에 'required' 속성을 넣어주고, input 태그가 focus일때와 valid일때의 스타일을 동일하게 해주면 된다. 당연히 input 태그에 transition 효과도 줘야한다. 구현 코드 및 결과는 아래와 같다. 

 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

아래는 약간 다른 버전으로, 스타일만 약간 바꿔봤다. 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.