두 손끝의 창조자

요소에 키보드 등으로 포커스가 됐을 때 선택된 요소를 하이라이트 해주는 스타일을 변경하고자 할 때 button:focus-visible { outline: 2px solid rgba(41, 182, 198, 0.50); } a:focus-visible { outline: 2px solid rgba(41, 182, 198, 0.50); } focus-visible 주도선택자를 이용해서 outline을 변경한다.

checkbox 를 좀 이쁘게 꾸며보자. [type='checkbox'] { vertical-align: middle; appearance: none; border-color: #29b6c6; transition: border 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; border-radius: 20%; } [type='checkbox']:focus { box-shadow: 0 0 0 0.2rem rgba(41, 182, 198, 0.25); } [type='checkbox']:checked { background-color: #29b6c6; } [type='checkbox']:checked..