html - 如何在选择元素上使用插入框阴影？

Question

这是在选择标签上使用框阴影的示例。

但是这里使用了 wrapper 元素，所以 inset 属性在那里不起作用。

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

Answer 1

我设法通过用 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;

}

Answer 2

它似乎可以工作，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>