html+下拉箭头样式,HTML选择下拉箭头样式

4 个答案:

答案 0 :(得分：0)

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

＆＃13;

＆＃13;

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

}＆＃13;

Select Any

Option 1

Option 2

＆＃13;＆＃13;＆＃13;

答案 1 :(得分：0)

试试这个：

HTML：

Here is the first option

The second option

The third option

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;

}

答案 2 :(得分：-1)

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

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

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

＆＃13;

＆＃13;

$( "#sel_val" ).change(function() {

var option = $(this).find('option:selected').val();

$('#sel_txt').text(option);

});＆＃13;

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

}＆＃13;

Select a value*

Select

option1

option2

option3

option4

option5

option6

option7

＆＃13;＆＃13;＆＃13;

自定义选择下拉列表click的来源链接

CSS arrow click的来源链接

答案 3 :(得分：-1)

首先，您需要删除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;

}