select box와 input box의 스타일을 잡기 위해선 스타일을 초기화 시켜 주는게 좋다.
특히 Mac은 Windows와 다르게 select box의 경우 스타일을 초기화 하지 않으면 원하는 CSS 를 입힐 수 없다.
다음 코드를 참고하여 원하는 속성을 사용하면 된다.
속성은 찾는 대로 계속 추가해 나갈 예정.
/* input 기본 스타일 초기화 */
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; }
/* input type number 에서 화살표 제거 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}/* Select box 스타일 초기화 */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* IE 에서 Select box 화살표 제거 */
select::-ms-expand { display: none; }Firefox에서 input number 화살표 없애는 방법
Firefox에서는 조금 다른 방법을 써야한다.
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type='number'] {
-moz-appearance: textfield;
}-moz-appearance: textfield; 라는 속성을 추가해 input number의 외형을 텍스트필드로 바꿔줘야한다.
외형(appearance)에 관한 정보는 이 글을 읽어보면 도움이 된다.
읽어보면 좋은 정보
[WEBDIR] 폼 필드(input type=”text”) 디자인 #1
[WEBDIR] 폼 필드(select 박스) 디자인 #2
[WEBDIR] 폼필드(체크박스, 라디오) 디자인 #3
[WEBDIR] 폼 필드(input type=”file”) 디자인 #4
2021-02-21
IE에서 비밀번호 보이기/숨기기 눈 없애기
input[type='password']::-ms-reveal,
input[type='password']::-ms-clear {
display: none;
}