• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012