메뉴 건너뛰기

HEUKMYO

Html/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)에 관한 정보는 이 글을 읽어보면 도움이 된다.


[출처: http://wallel.com/select-box-input-box-style-%EC%B4%88%EA%B8%B0%ED%99%94-css/]

위로