[CSS] input 기본 테두리 제거 및 클릭 시 검은색 테두리 제거

1. 기본 테두리 제거

See the Pen input 기본 테두리 제거 by 김근열 (@raxuybol-the-decoder) on CodePen.

 

 

2. 클릭(포커스) 시 테두리 제거

See the Pen input 클릭(포커스) 시 테두리 제거 by 김근열 (@raxuybol-the-decoder) on CodePen.

 

 

3. 클릭 유지 시 테두리 제거

2번 예제를 두고 테스트했을 때 클릭을 유지할 때 테두리 색상이 약간 변하는 것을 볼 수 있다.

이때는 input태그의 border를 원하는 것을 주면 된다.

See the Pen input 클릭 유지 시 테두리 by 김근열 (@raxuybol-the-decoder) on CodePen.

 

 

번외. 주의사항

• 접근성 고려: 포커스 시 테두리를 제거하면 키보드나 스크린 리더를 사용하는 사용자들이 현재 포커스된 요소를 인지하기 어려울 수 있습니다. 따라서 포커스 시 시각적으로 구분할 수 있는 다른 스타일을 적용하는 것이 좋습니다. 예를 들어, 배경색을 변경하거나 그림자를 추가하는 방법이 있습니다.
• 일관성 유지: 모든 <input> 요소에 동일한 스타일을 적용하여 사용장의 경험의 일관성을 유지하는 것이 중요합니다.
• 웹접근성: 기본 테두리 + 클릭 시 테두리를 모두 없애기 박스가 없는 상태라면 웹접근성에 문제가 발생할 수 있습니다. 이를 위해 커스팀 테두리 또는 그림자 등을 넣는 것을 고려해보셔야 합니다.