表单样式美化(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
- 表单样式美化(1)-----输入框Text,密码框Password,文本域Textarea样式美化
- html表单输入框css样式美化特效源代码下载
- 弹出框美化 alert样式美化
- 文件上传框样式美化
- CSS表单-文本输入框美化CSS教程
- 表单美化之textarea文本域背景的美…
- text输入框样式
- select美化自定义下拉框样式
- html5和css3表单样式美化插件
- 美化复选框(给复选框添加样式)
- 输入框美化(placeholder)
- text文本输入表单input和textarea
- 美化博客样式
- 单选框、多选框样式美化
- html radio样式美化
- 多说样式美化
- 美化input : file样式
- 纯css3单选框和复选框样式美化效果
- Log图文详解(Log.v,Log.d,Log.i,Log.w,Log.e)的用法
- 黑马程序员_Java基础
- OGRE之跳出漫长的编译等待
- JavaScript学习 jquery13 其他事件
- 一 认识lucene
- 表单样式美化(1)-----输入框Text,密码框Password,文本域Textarea样式美化
- ACM总结之精度
- 机房收费系统之导出为Excel
- suse11下oracle_rac安装准备
- WPF名称空间
- IOS:Objective-C字面量
- 构造函数为什么不能为虚函数 & 基类的析构函数为什么要为虚函数
- 初步接触angular.js---一些基本概念的理解
- iOS: 枚举类型 enum,NS_ENUM,NS_OPTIONS