如何在選擇元素上使用插入框陰影？

Question

Here是在選定標籤上使用框陰影的示例。

但是使用了包裝元素，所以插入屬性在那裏不起作用。

是否可以在選擇標籤上使用嵌入框陰影？

Answer 1

它似乎在input="text"工作，但我懷疑這會在select工作-s

select, input { 
 
    -webkit-box-shadow: 5px 5px 5px #666; 
 
    -moz-box-shadow: 5px 5px 5px #666; 
 
    box-shadow: 5px 5px 5px #666; 
 

 
    display:block; 
 
    margin:20px; 
 
    padding: 3px; 
 
    border: 0; 
 
    outline: 1px solid #666; 
 
}

<input type="text" name="foo" placeholder="First Name" /> 
 

 
<select name="bar"> 
 
    <option value="foobar">Foobar</option> 
 
    <option value="bazbat">Bazbat</option> 
 
</select>

Answer 2

我設法用一個div包裹選擇元素做到這一點。這是一個工作示例 - http://jsfiddle.net/UD2QP/779/。

HTML：

<div class="select_wrapper"> 
    <select name="type" id="type"> 
     <option value="week">11 week</option> 
     <option value="month">11 month</option> 
    </select> 
</div> 

CSS：

select, 
div.select_wrapper { 
    display: block; 
    width: 430px; 
    color:#58595b; 
    font-weight: normal; 
    font-size: 16px; 
    font-family: "Arial", sans-serif; 
    padding:5px; 
    margin-top:5px; 
    margin-bottom: 10px; 
    background: #fff; 
    -moz-box-shadow: inset 0px 0px 7px rgba(0, 0, 0, 0.33); 
    -webkit-box-shadow: inset 0px 0px 7px rgba(0, 0, 0, 0.33);   
    box-shadow: inset 0px 0px 7px rgba(0, 0, 0, 0.33); 
    outline: none; 
    border: none; 
    resize:none; 
} 

select {   
    padding: 0px; 
    margin:0px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
} 

div.select_wrapper { 
    margin:0; 
    padding:5px; 
    margin-top:5px; 
    margin-bottom: 10px; 

}