셀렉트박스 css 스타일 변경

셀렉트박스 css 스타일 변경

css만을 사용해서 select 박스를 디자인하는 소스.

참고사이트 https://codepen.io/michmy/pen/jBQQpp

html부분

<div class="layer-select-box">
  <select name="" id="nav-select">
    <option value="">1번옵션</option>
    <option value="">2번옵션</option>
  </select>
</div>

css부분

.layer-select-box {
        position: relative;
        display: inline-block;
        /*margin-bottom: 15px;*/
        width: 180px;
        height:48px;
        float: left;
        border: 1px solid #ddd;

    }
    .layer-select-box select {
        display: inline-block;
        width: 100%;
        cursor: pointer;
        padding: 10px 15px;
        outline: 0;
        border: 0;
        border-radius: 0;
        background: white;
        color: black;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        font-size: 14px;
        height: 100%;
        background: url('/img/add/icon_select.png') 150px center no-repeat; /* 화살표 이미지 */
    }
    .layer-select-box select::-ms-expand {
        display: none;
    }

    .layer-select-box select:disabled {
        opacity: 0.5;
        pointer-events: none;
    }
    .layer-select-box__arrow {
        position: absolute;
        top: 16px;
        right: 15px;
        width: 0;
        height: 0;
        pointer-events: none;
        border-style: solid;
        border-width: 8px 5px 0 5px;
        border-color: #7b7b7b transparent transparent transparent;
    }
    .layer-select-box select:hover ~ .layer-select-box__arrow,
    .layer-select-box select:focus ~ .layer-select-box__arrow {
        border-top-color: #000;
    }
    .layer-select-box select:disabled ~ .layer-select-box__arrow {
        border-top-color: #ccc;
    }