Work/HTML, CSS

[크로스브라우징] input에 생기는 x 버튼 없애기

디쟈이너 2021. 5. 7. 19:51

IE에서 input을 사용할 때 주의해야할 것이 있다.

바로 원치 않는 input field 초기화 버튼이 자동으로 생성된다는 점이다.

이를 해결하기 위해 아래와 같은 스타일을 추가해준다.

input[type=text]::-ms-clear {
  display: none;
}

CSS reset 등에 미리 추가해두면 유용하게 처리할 수 있을듯!

AS-IS

input을 활성화하면 갑자기 input이 가로로 넓어지며 디자인에 맞지않는 엑스 버튼이 튀어나온다

갑툭튀 엑스 버튼

TO-BE

위 스타일 적용 후, 깔끔해진 input 태그 😌

📖 참고 자료

반응형