html页面输入框input的美化

html页面输入框input的美化

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2017-10-08 22:47:14
文章简介

HTML页面输入框input的美化是提升用户体验的关键。通过精心设计的样式,我们可以让输入框更加吸引眼球,提升用户填写信息的积极性。简洁、大气的设计风格,让用户在浏览网页时更加愉悦。

  • 正文开始
  • 相关阅读
  • 推荐作品

input输入框是网页必不可少的组件,可是每个浏览器对于输入框的显示样式各有不同

例如:html页面输入框input的美化   html页面输入框input的美化

上图分别就是谷歌浏览器和IE浏览器自带显示的输入框,样式也不足人意,所以大多都会自己写样式

以下是一个简单的文本框样式

input{ border: 1px solid #ccc; padding: 7px 0px; border-radius: 3px; /*css3属性IE不支持*/ padding-left:5px; }

效果图:

html页面输入框input的美化

样式属性含义:

border: 1px solid #ccc; /*设置输入框边框,边缘线的颜色、大小、及实线虚线*/ padding: 7px 0px; /*设置输入框高度,也可以用height,但是用height的话,输入框的光标会置于顶部,还要设置其他样式去固定,而且还不一定会兼容很好*/ border-radius: 3px; /*这个属性石css3里面的,IE不支持*/ padding-left:5px; /*让广告距离左边5个像素,一开始光标是贴着左边输入框的边缘的*/

基本上以上的样式算是如今比较常用的了

然后就是input的一些其他的设置

比如:属性 placeholder

这个属性在输入框里有提示文字效果,CSS3属性,不支持IE

html页面输入框input的美化

input点击发光特效:

input{ border: 1px solid #ccc; padding: 7px 0px; border-radius: 3px; padding-left:5px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s } input:focus{ border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) }

效果图:

html页面输入框input的美化

一个简单回到顶部效果-超过高度显示侧边返回顶部按钮
« 上一篇 2017年09月05日
表单内把select的值传递给textarea的标准JS写法实例
下一篇 » 2017年11月09日

如本文对您有帮助,就请墨鱼抽根烟吧!