HTML CSS 선택 화살표의 색상 변경

Question

SELECT 화살표의 색상을 파란색으로 변경하려고합니다.

간단한 방법이 있나요?

Answer 1

.select_box{ 
 
    width: 200px; 
 
    overflow: hidden; 
 
    border: 1px solid #000; 
 
    position: relative; 
 
    padding: 10px 0; 
 
} 
 
.select_box:after{ 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 6px solid transparent; 
 
    border-right: 6px solid transparent; 
 
    border-top: 6px solid #f00; 
 
    position: absolute; 
 
    top: 40%; 
 
    right: 5px; 
 
    content: ""; 
 
    z-index: 98; 
 
} 
 
.select_box select{ 
 
    width: 220px; 
 
    border: 0; 
 
    position: relative; 
 
    z-index: 99; 
 
    background: none; 
 
}

<div class="select_box"> 
 
<select> 
 
    <option>Test This Select</option> 
 
    <option>Test This Select</option> 
 
</select> 
 
</div>

Answer 2

이 코드 세그먼트를 시도

<div class="customerStyle"> 
    <select class="selectCustomer"> 
     <option value="Jone">Jone</option> 
     <option value="Tom">Tom</option> 
    </select> 
</div> 


.customerStyle select { 
    background: transparent; 
    width: 170px; 
    padding: 5px; 
    border: 0; 
    border-radius: 0; 
    height: 35px; 
} 

.customerStyle { 
    background: url("images/arrow.png") no-repeat right #ffffff; 
    border: 1px solid #000; 
    width: 150px; 
    height: 35px; 
    overflow: hidden; 
} 

"이미지/arrow.png"