html – CSS3 IE9点击伪元素？

2023年9月9日 204次阅读

我有以下小提琴设置了一个关于如何使用
CSS3设置选择框样式的示例.我在IE9中遇到了麻烦.标签：before和label：在伪元素之后阻止它们所在的下拉箭头的“点击”动作.除了IE9之外,每个浏览器都可以正常工作.有谁知道如何调整这个工作？我全都耳朵！

http://jsfiddle.net/CXJTv/

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

最佳答案 使用零不透明度的第二个选择：

    <!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>
点赞