user3932810 user3932810 - 5 months ago 21
CSS Question

HTML select dropdown arrow style

How to get the select dropdown arrow styled like shown in the image below.

<select>
<option>Select Any</option>
<option>Option 1</option>
<option>Option 2</option>
</select>


enter image description here

Answer

As others have mentioned you can hide the default select arrow by appearance property and apply your own style.

To support lower versions of IE(i haven't consider below 9) as appearance property won't work even with ms prefix , you can use the below method to have common support.

Arrow made by css not an image.

$( "#sel_val" ).change(function() {
  var option = $(this).find('option:selected').val();
  $('#sel_txt').text(option);
});
.wrapper{width:250px;margin:10px auto;}
.sbx{
  margin:0;
  width:100%;
 font-family:arial;
 position:relative; 
 background-color:#eee; 
}
.cus_selt:after{content:'';width:0; 
  height:0; 
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid #FD025F;
  position:absolute;
  bottom:-1px;
  z-index:2;
  right:-6px;
transform:rotate(-45deg);
}
.cus_selt{padding:20px;display:block;}
.styled {
float:left;
height: 56px;
margin: -58px 0 0;
opacity: 0;
width: 100%;
filter: alpha(opacity=0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="sbx" id="yoe_fld">
     <span class="cus_selt" id="sel_txt">Select a value*</span>
    <select id="sel_val" class="styled">
        <option>Select</option>
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
        <option>option5</option>
        <option>option6</option>
        <option>option7</option>
      </select>
   </div>
 </div>

Source link for custom select dropdown click

Source link for CSS arrow click