HTML 选择下拉箭头样式

Question

如何获得如下图所示样式的选择下拉箭头。

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

Answer 1

试试这个：

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

这个怎么样...只需将该图像设置为 Select 的背景。

.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>

小提琴：https://jsfiddle.net/sank8893/bhy9do60/9/

Answer 3

正如其他人所提到的，您可以通过外观属性隐藏默认选择箭头并应用您自己的样式。

为了支持低版本的IE（我没有考虑低于9）因为外观属性即使使用ms前缀也不起作用，您可以使用下面的方法来获得通用支持。

由 css 制作的箭头不是图像。

$( "#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>

自定义选择下拉菜单的源链接click

CSS箭头click的源链接

Answer 4

请看这里jsfiddle

首先您需要删除select 下拉菜单的默认样式。这样做使用

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

IE 使用：

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

然后只需应用您想要的样式，在本例中为 background-image

或者您可以使用border 制作一个三角形并使用:before 或: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;
}