HTML选择下拉箭头样式

Question

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>

Answer 1

Try this:

HTML:

<div class="styled-select slate">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>

CSS:

div { margin: 20px; }

.styled-select {
   height: 29px;
   overflow: hidden;
   width: 240px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}

.styled-select.slate {
   background: url(http://i.stack.imgur.com/8CVVr.png) no-repeat right center;
   height: 34px;
   width: 240px;
}

Answer 2

How about this... Just set that image to Select's background.

 .select-style { width: 268px; line-height: 1; border: 0; overflow: hidden; height: 34px; position:relative; background:#fff; } .select-style>select{ -webkit-appearance: none; appearance:none; -moz-appearance:none; width:100%; background:none; background:transparent; border:none; outline:none; cursor:pointer; padding:7px 10px; } .select-style>span{ position:absolute; bottom: 0; right: 0; height: 0; width: 0; cursor:pointer; border-right: 10px solid #ff0099; border-bottom: 10px solid #ff0099; border-left: 10px solid transparent; border-top: 10px solid transparent; } select::-ms-expand { display: none; } 

 <div class="select-style"> <select> <option>Select Any</option> <option>Option 1</option> <option>Option 2</option> </select> <span></span> </div> 

Fiddle: https://jsfiddle.net/sank8893/bhy9do60/9/

Answer 3

see here jsfiddle

first you need to remove the default styling of the select dropdown. to do that use

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

for IE use :

select::-ms-expand { 
display: none;
}    

then just apply your desired style, in this case with background-image

or you can use border to make a triangle and place it by using pseudo-elements like :before or :after .

select { 
    background:url("http://i.stack.imgur.com/8CVVr.png") no-repeat scroll right  bottom;
    background-size:contain;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding:5px 10px;
}

Answer 4

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