select box, input box style 초기화 CSS

2017-02-09

CSS

김 태영

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;
}

input mac select box number remove arrow reset css 화살표 숨기기 화살표 지우기