为 P 标签内的选择应用框阴影答案

【问题标题】：Apply Box Shadow for Select inside P tag为 P 标签内的选择应用框阴影
【发布时间】：2012-03-20 07:14:32
【问题描述】：

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

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;
}

【问题讨论】：

标签： html google-chrome css webkit

【解决方案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;
}

【讨论】：

表格是否位于表格中？我的意思是tabe > tr > td ?

【解决方案2】：

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

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

祝你好运！

【讨论】：

是的，因为我已经包装了表单控件，插入了 p 标签，我无法使用 div 标签包装它们。因为 p 中的 div 是不允许的。
你可以用 p 标签做到这一点。在演示中尝试。我将框中的代码更改为使用 p 标签而不是 div。这个想法是将 box-shadow 放在包含元素上，在你的情况下是 p 标签。
实际上，只需在选择周围添加另一个 p 标签，如果您无法重构标记，则为其添加 box-shadow。

【解决方案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 之外的所有其他浏览器。对于使用 div 的 webkit 包装选择。然后使用 jquery 检测 select 上的焦点事件并将 CSS 阴影类应用于该 div。（因为焦点事件不能应用于 div）

【讨论】：