반응형
HTML
<div class="select-style">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
CSS
.select-style {
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
overflow: hidden;
background: #fafafa url("img/icon-select.png") no-repeat 90% 50%;
}
.select-style select {
padding: 5px 8px;
width: 130%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
}
.select-style select:focus {
outline: none;
}
반응형
'CSS' 카테고리의 다른 글
CSS 익스플로러 IE만 적용 (0) | 2020.09.04 |
---|---|
이미지 마우스오버 안쪽테두리 주기 (0) | 2019.07.05 |
Multi-Level Accordion Menu 멀티레벨 아코디언 메뉴 세로메뉴 (0) | 2017.08.08 |
특수문자표 (0) | 2016.08.22 |
css 반응형웹 모바일 기기에만 반응하게, 미디어마다 다르게 표시 (0) | 2016.08.19 |
댓글