순수한 CSS만 사용해서 <select>, <option> 요소의 스타일을 변경해 보아요 ~

1. CSS만 사용해서 <select> 스타일 변경해보기

 

① <select> 기본값

<select>, <option> 요소를 사용하면 드롭다운(dropdown) 목록을 만들 수 있습니다.
<select> 요소로 드롭다운(dropdown) 목록의 시작과 끝을 표시하고 그 안에 <option> 요소를 사용하여 원하는 항목들을 추가합니다. <option> 요소에는 value속성을 이용해 서버로 넘겨주기 위한 값을 지정해주어야 합니다.

아래 예제는 아무런 스타일 지정도 하지 않은 순수한 <select>, <option> 요소를 사용한 드롭다운(dropdown) 목록입니다.

Markup

  1. <body>
  2. <select>
  3. <option value="서버로 넘길 값"> 선택 1 </option>
  4. <option value="서버로 넘길 값"> 선택 2 </option>
  5. <option value="서버로 넘길 값"> 선택 3 </option>
  6. <option value="서버로 넘길 값"> 선택 4 </option>
  7. <option value="서버로 넘길 값"> 선택 5 </option>
  8. </select>
  9. </body>
<body>
    <select>
        <option value="서버로 넘길 값"> 선택 1 </option>
        <option value="서버로 넘길 값"> 선택 2 </option>
        <option value="서버로 넘길 값"> 선택 3 </option>
        <option value="서버로 넘길 값"> 선택 4 </option>
        <option value="서버로 넘길 값"> 선택 5 </option>
    </select>
</body>

HTML5AROUND on html5around.com

 

② <select> 스타일 변경하기

이번 예제는 <select> 요소에 CSS를 사용해서 스타일을 변경했습니다.
<option> font-size, color 값은 <select>의 CSS값을 그대로 따라가는 걸 볼 수 있습니다.

만약 <option> 요소의 스타일을 바꾸고 싶으면 ‘option {color: red;}’ 이런식으로 따로 <option> 요소에 스타일을 지정해주면 됩니다. 하지만 <option> 요소는 CSS만으로는 스타일 변경이 상당히 까다로우니 이 페이지 맨 마지막에서 다루도록 하겠습니다.

CSS

  1. select {
  2. width: 200px;
  3. height: 30px;
  4. padding-left: 10px;
  5. font-size: 18px;
  6. color: #006fff;
  7. border: 1px solid #006fff;
  8. border-radius: 3px;
  9. }
select {
    width: 200px;
    height: 30px;
    padding-left: 10px;
    font-size: 18px;
    color: #006fff;
    border: 1px solid #006fff;
    border-radius: 3px;
}

HTML5AROUND on html5around.com

 

③ <select> 박스내에 있는 네이티브 화살표 없애기

위에 ②번째 <select> 스타일을 보면 우측 네이티브 화살표가 눈에 거슬립니다.
CSS만으로는 네이티브 화살표의 스타일을 변경 할 수가 없습니다.
그래서 이번에는 <select>의 네이티브 화살표를 없애보겠습니다.
모든 브라우저에 적용될 수 있도록 vender-prefix 를 써줘야 하고 IE는 속성이 살짝 다릅니다.

추가 CSS

  1. select {
  2. width: 200px;
  3. height: 30px;
  4. padding-left: 10px;
  5. font-size: 18px;
  6. color: #006fff;
  7. border: 1px solid #006fff;
  8. border-radius: 3px;
  9. -webkit-appearance: none; /* 화살표 없애기 for chrome*/
  10. -moz-appearance: none; /* 화살표 없애기 for firefox*/
  11. appearance: none; /* 화살표 없애기 공통*/
  12. }
  13. select::-ms-expand {
  14. display: none; /* 화살표 없애기 for IE10, 11*/
  15. }
select {
    width: 200px;
    height: 30px;
    padding-left: 10px;
    font-size: 18px;
    color: #006fff;
    border: 1px solid #006fff;
    border-radius: 3px;
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
   -moz-appearance: none;    /* 화살표 없애기 for firefox*/
   appearance: none;         /* 화살표 없애기 공통*/
}
select::-ms-expand {
   display: none;            /* 화살표 없애기 for IE10, 11*/
}

HTML5AROUND on html5around.com

 

④ <select> 박스내에 있는 화살표 아이콘 변경하기

③번 예제처럼 화살표를 없애고 <select> 내의 글씨를 가운데 정렬하면 깔끔하고 이쁠꺼 같은데
CSS만 사용해서 <select> 내의 글씨를 가운데 정렬 방법은 현재까지 Chrome 브라우저에서만 가능합니다.
‘select {text-align-last: center;}’ 이렇게 쓰면 되는데 Chrome 브라우저에서만 되기 때문에 이번 예제에서는 하지 않겠습니다.

네이티브 화살표를 없애니 우측이 너무 썰렁합니다. 직접 제작한 화살표 아이콘 이미지를 <select> 박스에 background 속성을 사용해서 적용해보도록 하겠습니다.

추가 CSS

  1. select {
  2. width: 200px;
  3. height: 30px;
  4. padding-left: 10px;
  5. font-size: 18px;
  6. color: #006fff;
  7. border: 1px solid #006fff;
  8. border-radius: 3px;
  9. -webkit-appearance: none;
  10. -moz-appearance: none;
  11. appearance: none;
  12. background: url('select-arrow.png') no-repeat 95% 50%; /* 화살표 아이콘 추가 */
  13. }
  14. select::-ms-expand {
  15. display: none;
  16. }
select {
    width: 200px;
    height: 30px;
    padding-left: 10px;
    font-size: 18px;
    color: #006fff;
    border: 1px solid #006fff;
    border-radius: 3px;
    -webkit-appearance: none; 
   -moz-appearance: none;    
   appearance: none;
   background: url('select-arrow.png') no-repeat 95% 50%; /* 화살표 아이콘 추가 */       
}
select::-ms-expand {
   display: none;            
}

HTML5AROUND on html5around.com

 

⑤ 선택된 <option> 스타일 변경하기

지금까지는 <select>요소의 스타일 변경에 대해서 알아보았습니다.
이번 예제에서는 선택된 <option>요소의 스타일을 CSS로 변경해보겠습니다.
FireFox는 약간 다르니 주의해주세요.

하지만 Chrome 브라우저에서는 선택된 <option>요소의 hover 스타일이 표현되지 않습니다.
게다가 Mac 에서는 <option>에 설정한 스타일이 모든 브라우저에서 표현되지 않습니다.
오로지 윈도우 에서의 IE, Chrome, Firefox 브라우저에서만 <option>에 적용된 스타일이 표현됩니다.
그래서 가급적 CSS로는 <option> 에 스타일을 적용하지 말고, ‘JQuery Dropdown plugin’나 자바스크립트를 사용해서 스타일을 변경하는것을 ‘강력 추천!!’ 드립니다.


추가 CSS

  1. /* check, hover 스타일 설정 IE, Chrome */
  2. select option:checked,
  3. select option:hover {
  4. background: #ff00ff;
  5. color: #fff;
  6. }
  8. /* check, hover 스타일 설정 FireFox */
  9. select option:checked,
  10. select option:hover {
  11. box-shadow: 0 0 10px 100px #ff00ff inset;
  12. color: #fff;
  13. }
/* check, hover 스타일 설정 IE, Chrome */
select option:checked, 
select option:hover {    
    background: #ff00ff; 
    color: #fff;
}

/* check, hover 스타일 설정 FireFox */
 select option:checked,
select option:hover { 
    box-shadow: 0 0 10px 100px #ff00ff inset;  
    color: #fff;
}


 
  


'CSS' 카테고리의 다른 글

border 스타일 (종류)  (0) 2019.02.05
공백처리방법  (0) 2019.02.05
표 정렬 (table)  (0) 2019.02.05
구글 웹폰트 적용하기 방법  (0) 2019.02.05
에릭 마이러 reset_css  (1) 2018.12.12

+ Recent posts

티스토리툴바