网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索 电影文章

文章热门排行随机文章推荐文章

css之input hover,focus伪类特效

关注我吧
 2014/8/13 9:08:21 阅读次数:9324

记得以前为了兼容ie6,ie7等低版本不支持css伪类,不得不用JS去做效果。现在IE6,7使用的人越来越少了,我们是时候应该抛弃它们了(使用JS控制文本框特效)。

CSS伪类可以很好的做到这点只需要几行代码就可以了。而且是全局性的,不需要每个文本框跟按钮去添加样式。一劳永逸,够爽的吧。

下面就开始介绍。IE6 IE7 IE8(Q) 不支持如”:focus,:hover”等伪类特效,所以我们的特效是基于支持伪类的浏览器中才能看到的特效。支持键盘控制一样可以显示效果。

效果如下图所示:

css之input hover,focus伪类特效

兼容情况

IE6

IE7

IE8(Q)

IE8(S)

Firefox

Safari

Opera

Chrome

N

N

N

Y

Y

Y

Y

Y

源代码如下:(可运行查看效果)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css之input hover,focus伪类特效</title>

<style>
button::-moz-focus-inner,input[type="button"]::-moz-focus-inner {border:none;padding:0;}
input{ vertical-align:middle;line-height:normal;}		
																				
.txt{background:#fff;border:1px solid #9a9a9a;border-right:1px solid #cdcdcd;border-bottom:1px solid #cdcdcd;height:17px;line-height:17px;overflow:visible;padding:4px;margin-right:5px;}
.txt:hover,.txt:focus{background:#fff;border:1px solid #999;}


.button{
    background: #fff; /* Old browsers */
    background: -moz-linear-gradient(top, #fff 0%, #dedede 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#dedede)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fff 0%,#dedede 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fff 0%,#dedede 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #fff 0%,#dedede 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#dedede',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #fff 0%,#dedede 100%); /* W3C */
    border: 1px solid #ccc;
    color: #777;
    font: 12px/17px Arial,Tahoma,Verdana,sans-serif;
    padding:4px 15px;
    cursor: pointer;
    overflow: visible;  border-radius: 4px 4px 4px 4px;
}
.button:hover,.button:focus{
	background: #fff; /* Old browsers */
    background: -moz-linear-gradient(top, #fff 0%, #ccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#ccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fff 0%,#ccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fff 0%,#ccc 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #fff 0%,#ccc 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#ccc',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #fff 0%,#ccc 100%); /* W3C */
    border: 1px solid #aaa;
}

</style>
</head>
<body>
<input type="text" style="width:200px;" class="txt"/><input type="button" value="搜索" class="button" />
</body>
</html>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以点击链接加入群:【幸凡学习网技术交流群】

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

0
无觅相关文章插件,快速提升流量
阅读全文内容关闭