Mat*_*orn 4 css cross-browser css-selectors internet-explorer-8
我有一些标记,当试图文本输入具有焦点时,我试图让"某些输入的提示"亮起.我试图使用焦点伪类和兄弟选择器.如果我只使用一个或另一个它工作得很好.但是,当它们在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>
这是我所看到的截图:
截图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上测试了我的解决方案,它运行正常.
| 归档时间： |
|
| 查看次数： |
4048 次 |
| 最近记录： |