IE에서 input을 사용할 때 주의해야할 것이 있다.
바로 원치 않는 input field 초기화 버튼이 자동으로 생성된다는 점이다.
이를 해결하기 위해 아래와 같은 스타일을 추가해준다.
input[type=text]::-ms-clear {
display: none;
}CSS reset 등에 미리 추가해두면 유용하게 처리할 수 있을듯!
AS-IS
input을 활성화하면 갑자기 input이 가로로 넓어지며 디자인에 맞지않는 엑스 버튼이 튀어나온다
TO-BE
위 스타일 적용 후, 깔끔해진 input 태그 😌
📖 참고 자료
반응형
'Work > HTML, CSS' 카테고리의 다른 글
| [CSS] '::before', '::after', ':hover', '::lang();' 사용 스타일 오류 해결 (0) | 2021.05.12 |
|---|---|
| [Sass] Architecture Guideline 번역 (0) | 2021.05.10 |
| [크로스브라우징] IE에서 테이블 테두리가 사라지는 문제 (0) | 2021.05.06 |
| [크로스브라우징] Flex 쓰기 전에 알아두면 좋은 것들, 알려진 이슈 (0) | 2021.05.05 |
| [크로스브라우징] IE에서 CSS 속성 초기화(initial) 하는 방법 (0) | 2021.05.04 |