[css] CSS - appearance 속성 - 요소자체구성요소숨기기 (= 요소내장구성요소제거 = appearance속성 = 어피어런스속성) (실렉트화살표제거, select, arrow)

1. appearance 예제 - select 요소의 화살표 제거
2. appearance 정의
3. appearance 구문
4. 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 계열 속성값]

1. checkbox
2. radio
3. push-button
4. square-button
5. button
6. button-bevel
7. listbox
8. listitem
9. menulist
10. menulist-button
11. menulist-text
12. menulist-textfield
13. scrollbarbutton-up
14. scrollbarbutton-down
15. scrollbarbutton-left
16. scrollbarbutton-right
17. scrollbartrack-horizontal
18. scrollbartrack-vertical
19. scrollbarthumb-horizontal
20. scrollbarthumb-vertical
21. scrollbargripper-horizontal
22. scrollbargripper-vertical
23. slider-horizontal
24. slider-vertical
25. sliderthumb-horizontal
26. sliderthumb-vertical
27. caret
28. searchfield
29. searchfield-decoration
30. searchfield-results-decoration
31. searchfield-results-button
32. searchfield-cancel-button
33. textfield
34. textarea

 

---

[Mozilla 계열 속성값] 

1. button
2. checkbox
3. checkbox-container
4. checkbox-small
5. dialog
6. listbox
7. menuitem
8. menulist
9. menulist-button
10. menulist-textfield
11. menupopup
12. progressbar
13. radio
14. radio-container
15. radio-small
16. resizer
17. scrollbar
18. scrollbarbutton-down
19. scrollbarbutton-left
20. scrollbarbutton-right
21. scrollbarbutton-up
22. scrollbartrack-horizontal
23. scrollbartrack-vertical
24. separator
25. statusbar
26. tab
27. tab-left-edge Obsolete
28. tabpanels
29. textfield
30. textfield-multiline
31. toolbar
32. toolbarbutton
33. toolbox
34. -moz-mac-unified-toolbar
35. -moz-win-borderless-glass
36. -moz-win-browsertabbar-toolbox
37. -moz-win-communications-toolbox
38. -moz-win-glass
39. -moz-win-media-toolbox
40. tooltip
41. treeheadercell
42. treeheadersortarrow
43. treeitem
44. treetwisty
45. treetwistyopen
46. treeview
47. 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