[CSS] input checked 스크롤 상단 이동

웹접근성에 친화적인 visually hidden 스타일

(tailwindcss 에서도 사용됨)

 

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

 

But,,,,

input 에 적용했더니

checked 할 때 마다

스크롤이 상단으로 튀는 현상 발생

 

어쩔 수 없이

display:none; 추가

 

해결방안을 좀 더 찾아봐야겠다 🙄