表单样式美化(1)-----输入框Text,密码框Password,文本域Textarea样式美化

来源:互联网 发布:个人下载网站源码 编辑:程序博客网 时间:2024/05/23 19:16

         浏览器默认的表单样式比较难看是总所周知的,而且各个浏览器的的样式又不统一,同一个系统在不同浏览器运行的效果又不一样,有些要求比较高的客户肯定对此很不满意。为此,我学习了一些CSS美化样式的知识,在此跟大家分享下。废话不多说,直接上代码:(这里上的是截图,有兴趣的同学动手敲下代码,研究研究大笑

1、CSS代码



2、HTML代码




3、效果图

进入页面看到的效果   鼠标浮上去的效果       获得焦点的效果

          

这里给大家介绍几个特殊的属性

border-radius:5px;  这是最新CSS3里的一个特性,加上这段属性,输入框会有圆角效果。

resize: none;如果文本域不加上这个属性,Chrome和Firefox下的文本域可以改变大小,而在IE下不会,为了统一风格,这里加上这个属性,不能让其改变大小,并且如果文本域可以改变大小,会影响整个页面的布局。

overflow: auto;如果不加上这个属性,IE下的文本域会默认出现滚动条样式,而Chrome和Firefox不会。

outline-style:none;加上这个样式是防止在Chrome下,当输入框获得焦点时,边框会变得很粗,而IE和Firefox不会


以上效果在IE9、Firefox 31.0、Chrome 36.0.1976.2下测试

0 0
原创粉丝点击