All geek questions in one place

IE8 Class Pseudo-Class and Sibling Selector

I have an inscription, and I try to make “tips for some input” light up when the axiomatic text input is focused. I am trying to use a pseudo-class for focus along with a selector. If I just use one or the other, it works fine. However, when combining them in IE8, it looks as if this style is not updated when entering text fields. NOTE: if you click the mouse button from the text box and return the style, it will be updated.

Here is the markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        html { font-family: Arial; }
        .lineItem {padding:5px; clear:both; }
        .label { display:block; font-size:large; color: #2C2F36; font-weight:bold; padding:5px 0px 3px 0px; }
        .textbox:focus { background-color: #FFFFBF; }       
        .textbox { font-size: large; color: #2C2F36; width:300px; background-color: #FFFFE8; padding:3px 5px; border:solid 2px #cecece; float:left; }
        .hint {  margin-left:10px; width:175px; font-size:smaller; display:block; float:left; color: #466E62; }
        .textbox:focus+.hint {color: Red; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="lineItem">
            <label for="ListName" class="label">List Name</label>
            <input id="Name" name="ListName" type="text" class="textbox" />
            <span class="hint" id="NameHint">This is the title of your List.</span>
        </div>
        <div class="lineItem">
            <label for="ListSlug" class="label">http://List/Username/</label>
            <input id="Slug" name="ListSlug" type="text" class="textbox" />
            <span class="hint" id="SlugHint">The URL that you will use to share your list with others.</span>
        </div>
    </div>
    </form>
</body>
</html>

Here is a screenshot of what I see:

Screenshot http://www.osbornm.com/pics/IE8Issue.png

NOTE. Works in other browsers: (and other pseudo-classes, such as working with hovering

+3
2

http://www.quirksmode.org/css/contents.html IE, , - , , , CSS.

jQuery, :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        html { font-family: Arial; }
        .lineItem {padding:5px; clear:both; }
        .label { display:block; font-size:large; color: #2C2F36; font-weight:bold; padding:5px 0px 3px 0px; }
        /* .textbox:focus { background-color: #FFFFBF; } */
        .textbox { font-size: large; color: #2C2F36; width:300px; background-color: #FFFFE8; padding:3px 5px; border:solid 2px #cecece; float:left; }
        .hint {  margin-left:10px; width:175px; font-size:smaller; display:block; float:left; color: #466E62; }
        /* .textbox:focus + .hint {color: Red; } */
        .hintOn { color:Red; }
        .textboxOn { background-color: #FFFFBF; }
    </style>
    <script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        var Hints = {
            Swap: function(obj) {
                $(obj).parent().find('.hint').toggleClass("hintOn");
                $(obj).toggleClass("textboxOn");
            },
            Init: function() {
                $(function() {
                    $('.textbox').focus(function() {
                        Hints.Swap(this);
                    }).blur(function() {
                        Hints.Swap(this);
                    });
                });
            }
        };
        Hints.Init();
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="lineItem">
                <label for="ListName" class="label">List Name</label>
                <input id="Name" name="ListName" type="text" class="textbox" />
                <span class="hint" id="NameHint">This is the title of your List.</span>
        </div>
        <div class="lineItem">
                <label for="ListSlug" class="label">http://List/Username/</label>
                <input id="Slug" name="ListSlug" type="text" class="textbox" />
                <span class="hint" id="SlugHint">The URL that you will use to share your list with others.</span>
        </div>
    </div>
    </form>
</body>
</html>

Microsoft jQuery , . "" , CSS.

IE6, IE7, IE8, Firefox, Opera, Chrome Safari .

+7

I . , , IE8 , , . IE8, javascript. , :

CSS

/* Add a 'normal' selector for IE8, leave sibling selector for other browsers */
.lineItem.focus .hint, 
.textbox:focus + .hint {color: Red;}

JS

<!--[if IE 8]>
<script type="text/javascript" charset="utf-8">
    var els = document.getElementsByTagName('input');
    for(var i = 0; i < els.length; i++){
        var el = els[i];
        if(!/textbox/.test(el.className)) continue;
        el.attachEvent('onblur', function(){
            event.srcElement.parentNode.className = event.srcElement.parentNode.className.replace(' focus','');
        });
        el.attachEvent('onfocus', function(){
            event.srcElement.parentNode.className += ' focus';
        });
    };
</script>
<![endif]-->

script input.textbox. , , textbox. , input . / , IE8 , .

+4

Source: https://habr.com/ru/post/1723169/

More articles:


All Articles