- 전체(91)
- html5(1)
- web accessibility(11)
- Cross Browsing(20)
- html basic(7)
- css basic(23)
- meta(2)
- form(12)
- table(2)
- menu(2)
- box(1)
- button(1)
- font(1)
- etc(8)
- 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/]
댓글 0
댓글 쓰기 권한이 없습니다.
12 | 폼 필드(input type="file") | 2017.05.29 |
11 | 폼필드(체크박스, 라디오) | 2017.05.29 |
10 | 폼 필드(select 박스) | 2017.05.29 |
9 | 폼 필드(input type="text") | 2017.05.29 |
> | select box, input box style 초기화 CSS | 2017.05.29 |
7 | 파일 찾기 | 2017.04.27 |
6 | input placeholder line-height 적용 방법 1 | 2015.05.02 |
5 | form요소 css 스타일링 | 2015.05.02 |
4 | ime-mode 입력폼의 한영전환 지정하기 | 2014.11.14 |
3 | TextArea 박스 내부에 밑줄이미지 삽입 | 2009.09.09 |
2 | 회원가입 입력폼등에서 한글을 입력받아야 할 경우와 영문만 입력 받고 싶은 경우 | 2009.09.08 |
1 | 자동 완성 기능 사용하지 못하게 하는 방법 1 | 2009.09.08 |