文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML5和CSS3显示元素焦点的表单提示

问HTML5和CSS3显示元素焦点的表单提示
EN

Stack Overflow用户

提问于 2011-04-08 18:02:50

回答 3查看 4.7K关注 0票数 3

我正在建立一个网站在HTML5和CSS3，我希望为表单字段创建表单提示，显示该领域有:focus我想做这没有javascript是可能的，下面是我的表单标记。

<label for="username">Username</label>  
<input type="text" name="username" value=""/>
<div class="message">You need a username that is more than 5 letters long</div>

当用户名输入只使用CSS3中的psuedo类具有:focus时，是否可以显示.message？

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-04-08 18:46:10

好吧，既然你提到了CSS3，这里有一个带有一些CSS3淡入/淡出风格的解决方案。

HTML

<label for="username">Username</label>  
<input type="text" id="username" name="username">
<div class="msg">You need a username that is more than 5 letters long</div>

CSS

.msg { color:#999; opacity:0; display:inline;
    transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
}
input:focus+.msg { opacity:1; }

演示：jsfiddle.net/Marcel/RqaV6

票数 6

Stack Overflow用户

发布于 2011-04-08 18:14:22

这是你要找的东西吗？

.message{visibility:hidden;}
input:focus+.message{visibility:visible}

编辑:你也可以查看这个：http://reference.sitepoint.com/css/adjacentsiblingselector

票数 5

Stack Overflow用户

发布于 2011-04-08 18:19:46

这是可能的：

<!DOCTYPE html>
<html>
<head>
    <style media="screen" type="text/css">
        #message {display: none;}
        #test:focus + #message {display: block;}
    </style>
</head>
<body>
<div>
    <input id="test" name="test"/>
    <div id="message">message!!!</div>
</div>
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5593500

复制

相似问题

问HTML5和CSS3显示元素焦点的表单提示
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5和CSS3显示元素焦点的表单提示EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5和CSS3显示元素焦点的表单提示
EN