IE8焦點僞類和兄弟選擇器

我有一些標記，我試圖讓有些輸入的提示點亮，當焦慮的文本輸入有焦點時。我正在嘗試使用焦點僞類與兄弟選擇器一起使用。如果我只使用一個或另一個，它工作得很好。但是，將它們組合在IE8中時，它看起來好像在通過文本框標籤時該樣式不會更新。注意：如果您從文本框中單擊並退回，它們的樣式會更新。IE8焦點僞類和兄弟選擇器

下面是標記：

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

這是我所看到的截圖：

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

注：工作在其他瀏覽器：（和其他僞類，如懸停工作

來源

2009-11-17 Matthew M. Osborn

根據http://www.quirksmode.org/css/contents.html相鄰兄弟選擇不正確的IE瀏覽器的支持，並基於該恐怕我必須說 - 對不起，你不能 achive你想只使用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上測試過我的解決方案，它工作正常。

來源

2009-11-19 23:38:38 rochal

+1爲您的詳細解釋和測試 – Seb 2009-11-20 15:19:42

我did some research並做了一些測試。似乎問題在於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]-->

插入最後的input.textbox元素。它將查看標籤，只有包含textbox類的包將被處理。它只是向父元素添加一個類，並在input元素模糊時刪除該類。通過使用標準的父/子選擇器，我們強制IE8做所需的事情。

來源

2009-11-26 05:28:04

IE8焦點僞類和兄弟選擇器

回答

相關問題