gpt4 book ai didi

css - IE8 焦点伪类和兄弟选择器

转载 作者:行者123 更新时间:2023-12-04 22:38:13 25 4
gpt4 key购买 nike

我有一些标记,我试图让“某些输入的提示”在相应的文本输入具有焦点时亮起。我正在尝试将焦点伪类与同级选择器一起使用。如果我只使用一个或另一个它工作得很好。但是,当在 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

注意:适用于其他浏览器 :( 和其他伪类,例如悬停工作

最佳答案

根据 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 上测试了我的解决方案,并且它工作正常。

关于css - IE8 焦点伪类和兄弟选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1752471/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com