css

CSS로 폼(form) <select> 스타일 변경하기

핑계/ editor

  • 3 comments
  • 28,089 views
  • 2017년 9월 15일

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

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


 

① <select> 기본값

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

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

Markup

<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

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

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

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

/* 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;
}

HTML5AROUND on html5around.com
 
 

2. 마치며


 

<select> 요소는 CSS로 어느정도 스타일 변경은 가능하지만 디자이너 맘에 쏙 들게 변경할려먼
‘JQuery Dropdown plugin’ 을 사용
해야 합니다.

수고하셨습니다.

‘JQuery Dropdown plugin’을 사용해서 드롭다운(dropdown) 스타일을 변경하실 분은
JQuery Dropdown Plugin 사용해서 폼(form) <select> 스타일 변경하기
튜토리얼을 읽어주세요 ~

핑계

댓글 먹고 살아요~

3
Leave a Reply

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
hyoun핑계hyerim Recent comment authors
newest oldest most voted
hyerim
Guest
hyerim

great!

hyoun
Guest
hyoun

select 태그의 삼각형 모양을 어떻게 변경하나 궁금했었는데 많은 도움됐네요.