select box, input box style 초기화 CSS

select box와 input box의 스타일을 잡기 위해선 스타일을 초기화 시켜 주는게 좋다.
특히 Mac은 Windows와 다르게 select box의 경우 스타일을 초기화 하지 않으면 원하는 CSS 를 입힐 수 없다.

다음 코드를 참고하여 원하는 속성을 사용하면 된다.
속성은 찾는 대로 계속 추가해 나갈 예정.

/* input 기본 스타일 초기화 */
input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
}

/* 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;
	margin: 0;
}
/* 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;
    margin: 0;
}

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

본문에 대해 문의가 있으신 분은 post@wallel.com로 이메일 보내주세요.