카테고리 없음
[HTML] form 스터디
수이르
2019. 4. 9. 01:56
크로스브라우징 이슈
-
iOS safari
-
input, textarea 태그에 border-radiuis 기본으로 값이 들어가있음 (별도로 0 지정)
-
IE9 이하 input placeholder 사용불가
-
스크립트를 사용하는 [방법](https://archive.cmsfactory.net/node/10224)
-
require 속성에 따른 브라우저별 툴팁 표시
-
파이어폭스 : box-shadow 속성 추가
-
IE : outline 속성 추가
-
크롬 : 미입력 input에 말풍선 툴팁
커스텀
-
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 사용하여 추가되는 클래스로 컬러 변경
-
select 화살표 지우기
.remove_select_arr { -webkit-appearance: none; /* for chrome */ -moz-appearance: none; /*for firefox*/ appearance: none; &::-ms-expand { display: none; } &:focus { outline: none; } }
-
괜찮은 UI 프레임워크
input 키보드 이벤트 발생 순서
-
keydown = keypress(문자가 입력될 때만 발생, 방향키/백스페이스/딜리트 x)
-
input
-
change
-
keyup