樣式使用漸變和自定義箭頭的SELECT（選項）標籤

Question

您可以在此處看到我的整個HTML。您可以將其複製/粘貼到本地的演示文檔中，查看我所指的內容。

http://chopapp.com/#ny9fxmtv

基本上我想要的風格箱既具有梯度和右側的自定義箭頭。它顯示在上圖中。

的問題是，我得到的梯度通過這個代碼：

background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#ececec)) ;

這是行21在我上面的代碼。但是因爲「background」屬性已經被這一行佔用，所以我不能包含一個「url（image.png）」標籤來指定自定義的向下箭頭圖像，這是我的代碼中的第20行。

有沒有辦法我可以有梯度和向下箭頭的圖像？

謝謝！

Answer 1

入住這link

background: #6cab26; 
background: url(IMAGE_URL); /* fallback */ 
background: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */ 
background: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */ 
background: url(IMAGE_URL), -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */ 
background: url(IMAGE_URL),  -ms-linear-gradient(top, #444444, #999999); /* IE10 */ 
background: url(IMAGE_URL),  -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */ 
background: url(IMAGE_URL),   linear-gradient(top, #444444, #999999); /* W3C */ 

Answer 2

你可以使用在框中的列表，包括

ul.className {list-style-image:url('someimage.gif');} 

，然後把你的盒子背景如你所願。

第二個選項只是將div放在該div的頂部，並且其中一個帶有漸變，頂部帶有箭頭。類似的東西？

Answer 3

<div class="selectParent"> 
<select> 
     <option value="1">Option 1</option> 
     <option value="2">Option 2</option>   
</select> 
</div>​ 


.selectParent{ 
width:80px; 
overflow:hidden; 
background: #d0e4f7; 
background: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea)); 
background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); 
background: -o-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); 
background: -ms-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); 
background: linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); 



} 

.selectParent select{ 
width: 100px; 
-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 
padding: 2px 2px 2px 2px; 
border: none; 
background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 60px center; 


} 

DEMO