CSS3 IE9点击通过伪元素？答案

【问题标题】：CSS3 IE9 click through pseudo-element?CSS3 IE9点击通过伪元素？
【发布时间】：2012-08-08 15:50:30
【问题描述】：

我设置了以下小提琴，其中包含有关如何使用 CSS3 设置选择框样式的示例。我在 IE9 中遇到问题。 label:before 和 label:after 伪元素阻止了它们所在的下拉箭头的“单击”动作。这在除 IE9 之外的每个浏览器中都可以正常工作。有谁知道如何调整它以使其工作？我全神贯注！

http://jsfiddle.net/CXJTv/

附：我只对css想法感兴趣。我不希望 JavaScript 成为使其正常工作的必要条件。

【问题讨论】：

这是迄今为止我见过的最好的纯 CSS 解决方案....适用于 webkit 和 Gecko。你最终找到了 IE9 的解决方案吗？

标签： html css internet-explorer-9 pseudo-element

【解决方案1】：

使用第二个不透明度为零的选择：

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
          
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

【讨论】：

我会接受这个，因为它在技术上是有效的，而且我不喜欢有未解决的问题。这不是我理想的答案，因为每次我这样做时都重复选择是不可取的。我认为并非所有浏览器都支持不透明度（例如仍在使用的旧浏览器）。

【解决方案2】：

如果 IE 对您当前的实现有问题，您始终可以使用 Modernizer 或 conditional statements 使 IE 恢复为下拉箭头的内置标准。

这里是a fiddle，我使用条件语句只解析一个非 IE 浏览器的类。

Over here我回答了一个问题，它可能会帮助您使用纯 CSS 为您的选择下拉菜单使用自定义样式。

【讨论】：