yourlist_web_renewal 중, 한 input 엘리먼트의 placeholder가 보일시와 안보일 시, label 엘리먼트에 각기 다른 스타일을 적용해야하는 일이 있었다.
현재 사용중인 tailwind에선 어떻게 사용해야할지 모르겠으나 순수 CSS 방식으로 하면 다음과 같다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.form_field:placeholder-shown ~ .form__label {
font-size: 1rem;
top: 0;
cursor: text;
}
.form_field:focus ~ .form__label {
top: -1.2rem;
font-size: 1rem;
font-weight: 700;
color: var(--primary-redrose-light);
}
.form_field:not(:focus) ~ .form__label {
color: var(--blackberry-lightest);
}
.form_field:not(:placeholder-shown) ~ .form__label {
top: -1.2rem;
font-size: 1rem;
}
위와 같이, [이벤트 발생] [선택자] [대상] 로 한 엘리먼트의 이벤트 발생 시 선택자로 적용할 엘리먼트를 선택하면 된다.