Home/ Questions/Q 458585
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T22:41:11+00:00

I have some mark up and I am trying to have the hints for

  • 0

I have some mark up and I am trying to have the “hints for some input” light up when the accosicated text input has focus. I am trying to use the focus pseudo class along with a sibling selector. If i just use one or the other it works just fine. However, when combining them in IE8 it apears as if that style doesn’t get updated when you tab through the textboxes. NOTE: that if you click away from the textbox and back they style is 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’m seeing:

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

NOTE: Works in other browsers 🙁 and other pseudo classes such as hover work

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    According to http://www.quirksmode.org/css/contents.html Adjacent Sibling Selectors are not correctly supported by IE browsers, and based on that I am afraid I must say – sorry, you cannot achive what you want using CSS only.

    But you can use jQuery, and this is how you can do it:

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

    In my solution I included reference to Microsoft hosted jQuery, and wrote simple method to apply styles you need. You can easily modify “highlighted” state of hint and input box by amending your CSS classes.

    I have tested my solution on IE6, IE7, IE8, Firefox, Opera, Chrome and Safari and it is working correctly.

    • 0