1

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

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

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

4

2 回答 2

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;

}
于 2013-05-24T10:46:01.007 回答
0

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

于 2012-05-19T00:16:16.947 回答