[HTML] form 스터디

크로스브라우징 이슈

---

1. iOS safari

• input, textarea 태그에 border-radiuis 기본으로 값이 들어가있음 (별도로 0 지정)

1. IE9 이하 input placeholder 사용불가

• 스크립트를 사용하는 [방법](https://archive.cmsfactory.net/node/10224)

1. require 속성에 따른 브라우저별 툴팁 표시

• 파이어폭스 : box-shadow 속성 추가

• IE : outline 속성 추가

• 크롬 : 미입력 input에 말풍선 툴팁

커스텀

---

1. placeholder color

   input { padding: 0.78571429em 2.1em 0.78571429em 1em; border-radius: 0.28571429rem; &.input_error { background-color: rgba(221, 78, 90, 0.1); } &::placeholder { color: #f5747f; opacity: 1; /* Firefox */ } &:-ms-input-placeholder { color: #f5747f; /* Internet Explorer 10-11 */ } &::-ms-input-placeholder { color: #c6c6c6 !important; /* Microsoft Edge */ } &::-webkit-input-placeholder { color: #f5747f; /* Safari, Chrome */ } }

• IE9 이하는 placeholder.js 사용하여 추가되는 클래스로 컬러 변경

1. select 화살표 지우기

.remove_select_arr { -webkit-appearance: none; /* for chrome */ -moz-appearance: none; /*for firefox*/ appearance: none; &::-ms-expand { display: none; } &:focus { outline: none; } }

1. 괜찮은 UI 프레임워크

• [Semantic-UI](https://semantic-ui.com/)

• [Materialize](https://materializecss.com/buttons.html)

input 키보드 이벤트 발생 순서

---

1. keydown = keypress(문자가 입력될 때만 발생, 방향키/백스페이스/딜리트 x)

2. input

3. change

4. keyup

[참고사이트](https://dororongju.tistory.com/91)