CSS 만으로 input의 label을 이용하여 floating label 만들기

소스 출처

https://codepen.io/tonystar/pen/JRLaKw

Pure-CSS Float Label. Finally.

Pure-CSS Float Label. Finally

 

 

 

밑은 내 응용예제

 

 

1. input에 placeholder 설정해주기

2. 각input을 감싸줄 블록/인라인블록 필요 (label 위치때문에)

3.구조 <div><input><label></label></div>

4.

input label{focus및value있을시 설정}
input:placeholder-shown:not(:focus) + *, input select:placeholder-shown:not(:focus) + * {변하기전값}

 

 

-- 설명 --

:not(:focus) + * 만 하면 value가 들어왔을때 포커스아웃되면 원상태로 돌아감
placeholder가 보이고 placeholder-shown and 포커스되지 않았을때 :not(:focus) 둘 다 충족 해야만 원본값으로 보인다.

A + B : A뒤에 바로 오는 형제 B 1개 선택
A + * : 위와 같은데 형제 전부 선택을 이렇게...ㅇ.ㅇ
내 예제에선 input 바로 뒤에 오는 애는 label 뿐인데다 얠 변경시키면 되는거라 *을 label로 바꿔도 무방 

꼭 placeholder 를 설정해줘야하는 이유?
css만으로는 input에 값이 실시간으로 변하는걸 감지할 수 없음 /
(스크립트 keyup / change로 넘어가야하는데 그러면 css서 건들 필요가 없음 <<글자수 byte 쪼개는건 가능) (제이쿼리에선 .val()이 있다)
실시간 글자수(바이트) 체크 후 실시간 출력 관련 (https://isntyet.tistory.com/34)

 

그래서 어차피 값이 들어오면 자동으로 사라지는 placeholder를 이용하여 플레이스홀더가 있을때 or 포커싱 되었을땐 라벨이 float되게 설정한것