셀렉트박스 CSS로 깔끔하게 처리하기

셀렉트박스를 css로 깔끔하게 변경을 해봅니다!

01. 셀렉트에 class="bo_w_select" 를 추가합니다.

[code]
<select class="bo_w_select">
    <option value="">분류선택1</option>
    <option value="">분류선택2</option>
    <option value="">분류선택3</option>
    <option value="">분류선택4</option>
    <option value="">분류선택5</option>
</select>

[/code]

첨부된 bo_w_select.zip 파일의 압축을 푸시면

화살표이미지 arrow_down_18dp.png 가 있는데

아래 스타일이 추가되는 파일과 동일 경로로 업로드해주신 후

아래와같이  추가합니다.

[code]

<style>

.bo_w_select {
    width: 100%; /* 가로 사이즈 */
    padding: 10px; /* 내부여백 */
    padding-left: 12px;
    border: 1px solid #ddd;
    background: url(./arrow_down_18dp.png) no-repeat right 50%; /* 화살표 위치 */
    background-size: 30px; /* 화살표 크기 */
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 12px;
    color: #000;
    outline:none;
}
.bo_w_select:hover {border: 1px solid #aaa;} /* 마우스오버 */

</style>

[/code]

끝!

참 쉽죠?