Question

我有以下在IE7中无效的CSS。

input:focus{border-width: 2px;border-color: Blue; border-style: solid;}

基本上，我只想在输入聚焦时设置边框属性。适用于Firefox等...如果有人能解释为什么它不能在IE 7中工作并建议一个可能的解决方法，我们将不胜感激。感谢。

Answer 1

我理解不想添加事件的愿望，但在这种情况下看起来MSIE7在这一点上是混蛋，需要被黑客攻击。在你对@ Ape-inago的评论中，你表明你正在使用jQuery。这是jQuery的解决方案。我在MSIE 6和7中对此进行了测试，看起来它可以做你想要的。

<script type="text/javascript">
$(document).ready(function(){
    if (jQuery.browser.msie === true) {
        jQuery('input')
            .bind('focus', function() {
                $(this).addClass('ieFocusHack');
            }).bind('blur', function() {
                $(this).removeClass('ieFocusHack');
            });
    }

});
</script>
<style>
input:focus, input.ieFocusHack
{
    border-width: 2px;
    border-color: Blue;
    border-style: solid;
}
</style>

Answer 2

此问题的已知答案是使用以下代码：

    sfFocus = function() {
    var sfEls = document.getElementsByTagName("INPUT");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onfocus=function() {
            this.className+=" sffocus";
        }
        sfEls[i].onblur=function() {
            this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
        }
    }}
if (window.attachEvent) window.attachEvent("onload", sfFocus);

这是css风格

input:focus, input.sffocus{background-color:#DEEFFF;}

问题在于IE根本无法识别这种风格。

编辑：你可以在这里找到一个使用原型的解决方案：http://codesnippets.joyent.com/posts/show/1837

Answer 3

如果你正在使用jQuery 1.7+，那么你会发现不再推荐使用'Live'，新的选择是'。''所以上面使用的代码#DotNetWise会读到：

$.browser.msie && $.browser.version < 8 && $("input,select,textarea").on({
    focus: function(){
        $(this).removeClass("blur").addClass("focus");
    },
    blur: function(){
        $(this).removeClass("focus").addClass("blur");
    }
});

Answer 4

一个jQuery更简单，更好的解决方案，适用于所有输入，即使是后来动态附加的输入：

 $.browser.msie && $.browser.version < 8 && $("input,select,textarea").live("focus", function(){
   $(this).removeClass("blur").addClass("focus"); 
}).live("blur", function() { 
   $(this).removeClass("focus").addClass("blur"); 
});

CSS示例：

input[type='text']:focus, input[type='text'].focus {
   border: 1px solid red;
}

Answer 5

在这种情况下最好获得javascript的帮助

IE7输入：焦点

6 个答案: