Html 为“选择内部P”标记应用框阴影

我想为选择框添加css3框阴影。它适用于除谷歌浏览器以外的所有浏览器。因为我用p标记包装表单元素，所以我不能用div标记包装select标记（因为在HTML中p中不允许使用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>

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

---

您只需使用一个跨度元素将其包裹，然后就可以将样式应用于该跨度元素

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>

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

试试这个网站-

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

祝你好运

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） 然后为select标记应用shadow\U select类

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

AAAA
BBBBB
CCCCC

---

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

表单是否位于表中？我的意思是tabe>tr>td？yabt，因为我已经在包装表单控件中插入了p标记，所以不能使用div标记来包装它们。因为p里面的div是不允许的。你可以用p标签来做这个把戏。在演示中尝试一下。我将框中的代码更改为使用p标记而不是div。其思想是在包含元素上放置框阴影，在您的例子中是p标记。实际上，只需在select周围抛出另一个p标记，如果您无法重构标记，就给它框阴影。