• Q&A
  • 회원가입
  • 로그인

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

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 속성값

[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

 

관련글 좌표
https://www.w3schools.com/howto/howto_js_rangeslider.asp
https://css-tricks.com/almanac/properties/a/appearance/
http://webdir.tistory.com/430

 

mdn appearance

https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

 

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012