如何在select元素上使用inset box-shadow？

Question

Here是在选择标记上使用框阴影的示例。

但是使用了包装元素，因此inset属性在那里不起作用。

是否可以在select标签上使用插入框阴影？

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包装select元素来做到这一点。这是一个有效的例子 - 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;

}