IE8 focus pseudo-classe et Sibling Selector

J'ai un peu de balisage et j'essaie d'allumer les "astuces pour certaines entrées" lorsque l'entrée de texte accosiquée a le focus. J'essaie d'utiliser la pseudo-classe focus avec un sélecteur de frères et soeurs. Si je n'utilise que l'un ou l'autre ça fonctionne très bien. Cependant, lorsque vous les combinez dans IE8, il apparaît comme si ce style n'était pas mis à jour lorsque vous faites un tabulation dans les zones de texte. NOTE: si vous cliquez loin de la zone de texte et retour, leur style est mis à jour.IE8 focus pseudo-classe et Sibling Selector

Voici le balisage:

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

Voici une capture d'écran de ce que je vois:

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

REMARQUE: Travaux dans les autres navigateurs: (et d'autres pseudo-classes telles que hover work

Source

2009-11-17 Matthew M. Osborn

Selon http://www.quirksmode.org/css/contents.html Sélecteurs adjacents fratries sont pas pris en charge correctement par les navigateurs IE, et sur cette base, je crains que je dois dire - excusez-moi, vous ne pouvez pas ACHIVE ce que vous voulez à l'aide CSS seulement.

Mais vous pouvez utiliser jQuery, et voici comment vous pouvez le faire:

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

Dans ma solution, je compris référence à Microsoft hébergé jQuery, et écrit méthode simple pour appliquer des styles dont vous avez besoin. Vous pouvez facilement modifier l'état d'indice et la zone de saisie "en surbrillance" en modifiant vos classes CSS.

J'ai testé ma solution sur IE6, IE7, IE8, Firefox, Opera, Chrome et Safari et cela fonctionne correctement.

Source

2009-11-19 23:38:38 rochal

+1 pour votre explication détaillée et les tests – Seb

I did some research et fait quelques tests. Il semble que le problème est que IE8 ne mettra pas à jour l'état à moins que l'élément ne soit spécifiquement flou avant que l'élément suivant ne devienne actif. J'ai testé un correctif IE8 ciblé, mais il nécessite javascript. Il est à vous si le compromis est la peine:

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

Insérer ce script avant la balise de corps de fermeture, ou après le dernier élément input.textbox. Il va parcourir les balises, seules celles contenant une classe textbox seront traitées. Il ajoute simplement une classe à l'élément parent et supprime la classe lorsque l'élément input s'est estompé. En utilisant un sélecteur parent/enfant standard, nous forçons IE8 à faire ce qui est désiré.

Source

2009-11-26 05:28:04

IE8 focus pseudo-classe et Sibling Selector

Répondre

Questions connexes