僅使用css樣式選擇下拉菜單

Question

我在網上搜索了近兩個小時，甚至沒有發現一個單獨的css樣式選擇下拉菜單。最重要的是我對z-index感興趣，以顯示絕對div區塊下的選擇下拉菜單。唯一建立的是造型偏移，背景顏色和字體，但其他CSS屬性呢？搜索webkit shadow dom也沒有結果。真的這是不可能的？ :(

Answer 1

下面是代碼

body { 
    margin-top:20px; 
    margin-left:20px; 
} 
select { 
    padding:9px; 
    margin: 0; 
    border-radius:4px; 
    -webkit-box-shadow: 
     0 0px 0 #ccc, 
     0 0px #fff inset; 
    background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -moz-linear-gradient(top, #FBFBFB 0%, #E9E9E9 100%); 
    background: url('http://i45.tinypic.com/309nb74.png') no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBFBFB), color-stop(100%,#E9E9E9)); 
    color:black; 
    border:none; 
    outline:none; 
    display: inline-block; 
    -webkit-appearance:none; 
    cursor:pointer; 
    border: 1px solid #ccc; 
} 

請通過this fiddle

Answer 2

樣式選擇框用CSS3：

HTML：

<label> 
    <select> 
     <option selected> Select Box </option> 
     <option>Short Option</option> 
     <option>This Is A Longer Option</option> 
    </select> 
</label>​ 

CSS：

body, html { 
    background:#444; 
    text-align:center; 
    padding:50px 0; 
} 

select { 
    padding:3px; 
    margin: 0; 
    -webkit-border-radius:4px; 
    -moz-border-radius:4px; 
    border-radius:4px; 
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; 
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; 
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; 
    background: #f8f8f8; 
    color:#888; 
    border:none; 
    outline:none; 
    display: inline-block; 
    -webkit-appearance:none; 
    -moz-appearance:none; 
    appearance:none; 
    cursor:pointer; 
} 

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    select {padding-right:18px} 
} 

label {position:relative} 
label:after { 
    content:'<>'; 
    font:11px "Consolas", monospace; 
    color:#aaa; 
    -webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    transform:rotate(90deg); 
    right:8px; top:2px; 
    padding:0 0 2px; 
    border-bottom:1px solid #ddd; 
    position:absolute; 
    pointer-events:none; 
} 
label:before { 
    content:''; 
    right:6px; top:0px; 
    width:20px; height:20px; 
    background:#f8f8f8; 
    position:absolute; 
    pointer-events:none; 
    display:block; 
} 

演示：http://cssdeck.com/labs/styling-select-box-with-css3

Answer 3

這將幫助你的風格選擇標籤。 http://www.bulgaria-web-developers.com/projects/javascript/selectbox/