Question

我想为选择框添加css3框阴影。它适用于除Chrome浏览器之外的所有浏览器。由于我用p标签包装表单元素，我不能用div标签包装select标签（因为HTML中不允许使用div中的div）。是否有其他方法可以为Google Chrome中的选择框应用框阴影？

HTML页面

<form method="post">
 <p>
   <label for"option_box"">Title:</label>

    <select name="option_box">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>

 </p>

CSS

select {
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

Answer 1

您可以使用span元素简单地包装它，然后您可以将样式应用于该span元素

HTML页面

<span class="select">    
    <select name="option_box">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
</span>

CSS

span.select {
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

Answer 2

试试这个网站 - http://jsfiddle.net/UD2QP/134/

他们有一个可行的解决方案，我可以在最新的Chrome上使用它。（我上面会评论，但我还不能。:)

祝你好运！

Answer 3

1）将以下行添加到css文件

.shadow_select {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.shadow_select:focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

2）然后对选择标签应用shadow_select类

<select class="shadow_slect">
     <option>AAAAA</option>
     <option>BBBBB</option>
     <option>CCCCC</option> 
</select>

这适用于除webkit之外的所有其他浏览器。 for webkit wrap select使用div。然后使用jquery在select上检测焦点事件，并将CSS shadow类应用于该div。（因为焦点事件不能应用于div）

应用Box Shadow选择P标签内部

3 个答案: