목차
- appearance 예제 - select 요소의 화살표 제거
- appearance 정의
- appearance 구문
- appearance 관련 주소
appearance 예제 - select 요소의 화살표 제거
<style>
select {
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none; /* 화살표 없애기 공통*/
}
select::-ms-expand { /* IE10, IE11*/
display:none; /*숨겨진 화살표의 영역유지 X */
display:hidden; /*숨겨진 화살표의 영역유지 O */
}
</style>
<select>
<option>옵션1 - 홈짱닷컴</option>
<option>옵션2 - Homzzang.com</option>
</select>
결과 보기
cf. 원래 모습
<select>
<option>옵션1 - 홈짱닷컴</option>
<option>옵션2 - Homzzang.com</option>
</select>
결과 보기
※ 브라우저가 뿌려주는 해당 요소의 기본구성요소 일부를 숨길 때 유용
appearance 정의
네이티브 (= OS/브라우저 자체 테마) 요소 디자인 해제/변경.
※ 크로스브라우징 (= 모든 브라우저 동일 화면 구현)에 유용.
1.
JS 구문 : object.style.appearance="button"
2.
주요 최신 브라우저 모두 지원.
단, IE 지원 X, Safari 부분 지원.
appearance 구문
selector {appearance: 속성값;}
[WebKit 계열 속성값]
- checkbox
- radio
- push-button
- square-button
- button
- button-bevel
- listbox
- listitem
- menulist
- menulist-button
- menulist-text
- menulist-textfield
- scrollbarbutton-up
- scrollbarbutton-down
- scrollbarbutton-left
- scrollbarbutton-right
- scrollbartrack-horizontal
- scrollbartrack-vertical
- scrollbarthumb-horizontal
- scrollbarthumb-vertical
- scrollbargripper-horizontal
- scrollbargripper-vertical
- slider-horizontal
- slider-vertical
- sliderthumb-horizontal
- sliderthumb-vertical
- caret
- searchfield
- searchfield-decoration
- searchfield-results-decoration
- searchfield-results-button
- searchfield-cancel-button
- textfield
- textarea
[Mozilla 계열 속성값]
- button
- checkbox
- checkbox-container
- checkbox-small
- dialog
- listbox
- menuitem
- menulist
- menulist-button
- menulist-textfield
- menupopup
- progressbar
- radio
- radio-container
- radio-small
- resizer
- scrollbar
- scrollbarbutton-down
- scrollbarbutton-left
- scrollbarbutton-right
- scrollbarbutton-up
- scrollbartrack-horizontal
- scrollbartrack-vertical
- separator
- statusbar
- tab
- tab-left-edge Obsolete
- tabpanels
- textfield
- textfield-multiline
- toolbar
- toolbarbutton
- toolbox
- -moz-mac-unified-toolbar
- -moz-win-borderless-glass
- -moz-win-browsertabbar-toolbox
- -moz-win-communications-toolbox
- -moz-win-glass
- -moz-win-media-toolbox
- tooltip
- treeheadercell
- treeheadersortarrow
- treeitem
- treetwisty
- treetwistyopen
- treeview
- window
appearance 관련 주소
MDN appearance
https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
https://www.w3schools.com/howto/howto_js_rangeslider.asp
https://css-tricks.com/almanac/properties/a/appearance/
http://webdir.tistory.com/430