DEV/CSS

[Cross browsing] Firefox 브라우저에서 select focus 시 보더 생기는 현상.

RAMY,LEE 2020. 9. 13. 18:06

 

안녕하세요 ~ 레미입니다.

이번 내용은 파이어폭스 브라우저에서 select 선택 시, 

option 박스에 점선이나 실선이 생기는 현상에 대해 이야기해보려고 해요!

 

이 현상은 단순하게 outline:0 속성으로 해결될 줄 알았으나! 해결되지 않더라고요.

그래서 구글링 하여 찾은 아래와 같은 방법으로 해결했습니다.

 

select {
   color: transparent !important;
   text-shadow: 0 0 0 #000 !important;
}
위처럼 추가하고,  
select option {
   color:#333;
}


옵션에 컬러 재지정하지 않으면 option 컬러가 안 나올 수 있으니 꼭 지정해주세요. 

그러나, 웹 접근성 준수할 시엔 outline을 살려야 합니다.

웹 접근성 미준수 시에만 사용해 주세요.

 

저와 같이 어려움에 겪는 분들에게 많은 도움이 되길 바라며 이만 물러나겠습니다.

 

뿅★