CSS 만 사용하여 선택 상자 스타일 변경

Question

나는 이렇게 만들려고합니다. 그래서 나는 이미 테두리를 제거 할 수 있습니다. 화살표와 사용자 정의 글꼴 크기가?
select box css

Answer 1

당신이 시도 할 수이

select.arrow { 
 
    border-bottom: 1px solid #999; 
 
    border-right: 0px solid #999; 
 
    border-left: 0px solid #999; 
 
    border-top: 0px solid #999; 
 
    width:200px; 
 
    padding: 10px; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    -ms-appearance: none; 
 
    background: url(../images/pin-point.png) 95% 0 no-repeat; /* Add your image here*/ 
 
         }

<select class="arrow"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select>