[Publish 일지] 21.08.30 - select

이렇게 생긴 버튼을 누르면 위,아래로 선택 가능한 옵션이 뜨는 버튼을 본 적이 있을 것이다.
이러한 버튼을 만드는 법은 select ~ option 을 사용하면 만들 수 있다.

<div className="plugin_top">
                    <select>
                        <option value="-1">전체</option>
                        <option value="1">IBK 투자 관계망</option>
                        <option value="2">SmartBill</option>
                        <option value="3">이카운트 ERP</option>
                        <option value="4">생산자네트워크</option>
                        <option value="5">아이마켓</option>
                        <option value="6">대출</option>
                        <option value="7">정책자금</option>
                        <option value="8">전자어음할인</option>
                    </select>
                    <input type="text" id="plugin_top_input" placeholder="플러그인명 입력"/>
                    <button id="plugin_top_button">검색</button>
</div>

select의 기본 화살표 이미지는이렇게 생겼다. 맨 상단에 있는 select 처럼 화살표 이미지를 바꾸고 싶다면 CSS를 이용해주는 수 밖에 없다.

.plugin_top select {
    width: 120px;
    padding:8px;
    border-radius: 5px;
    border: 1px solid #d8d6de;
    font-size: 12px;
    color: #bebbc9;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    background: url("../image/arrowbtn.png") 95% center no-repeat;
}

select의 css에서 appearence를 none으로 지정해준 뒤에, background에서 url로 img 파일을 따로 설정해줘야 한다. 그러면 화살표 모양을 변경할 수 있다.

클릭했을 때의 색을 검은색에서 다른 색상으로 변경해주는 css는

.plugin_top select:focus {
    border: 1px solid #00b9ef;
}

이런식으로 select:focus 에 style을 지정해준다.

input도 역시 focus에 style을 지정해주면 마우스로 클릭 시 테두리의 색깔 변환이 가능하다.

hover에 style을 주면 마우스를 올렸을 때의 테두리 색상 변화가 가능하다.