[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을 주면 마우스를 올렸을 때의 테두리 색상 변화가 가능하다.
Author And Source
이 문제에 관하여([Publish 일지] 21.08.30 - select), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@true_je0n/Publish-일지-21.08.30-select저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)