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;

}

總結

以上是生活随笔為你收集整理的html+下拉箭头样式,HTML选择下拉箭头样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。