CSS3 IE9单击伪元素？
[英]CSS3 IE9 click through pseudo-element?
问题描述
I have the following fiddle set up with a sample on how to style a select box with CSS3. 
我在下面的小提琴中设置了有关如何使用CSS3设置选择框样式的示例。 I'm having trouble in IE9. 我在IE9中遇到问题。 The label:before and label:after pseudo-elements are preventing the 'click' action of the drop down arrow that they are positioned over. label:before和label:after伪元素阻止了位于其上方的下拉箭头的“ click”动作。 This works in fine in every single browser except IE9. 这在除IE9之外的所有单个浏览器中都可以正常工作。 Does anyone have any idea how to tweak this to work? 有谁知道如何调整它的工作原理？ I'm all ears! 我全是耳朵！
http://jsfiddle.net/CXJTv/ http://jsfiddle.net/CXJTv/
PS I'm only interested in css ideas. PS我只对CSS想法感兴趣。 I do not want JavaScript to be a requirement to get this to work correctly. 我不希望JavaScript能够正常运行。
2 个解决方案
解决方案1
2 已采纳 2012-10-07 18:39:49
Use a second select with zero opacity: 使用不透明度为零的第二个选择：
<!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
0 2012-12-20 10:56:44
If IE is problematic for your current implementation, you could always use Modernizer or conditional statements to make IE revert to the standard built in arrow of the drop down. 如果IE对您当前的实现有问题，则可以始终使用Modernizer或conditional statements使IE恢复为下拉菜单中的内置标准。
Here is a fiddle where I use conditional statements to only parse a class if it's a browser that's not IE. 这是一个小提琴 ，在这里我使用条件语句来仅当它是不是IE的浏览器时才解析一个类。
Over here I answered a question which will probably help you to use a custom style for your select drop-down using pure css. 在这里，我回答了一个问题，该问题可能会帮助您使用纯CSS为自定义样式使用自定义样式。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.