html页面输入框input的美化

  • 压缩包大小:Unkown
  • 开发语言:
  • 软件授权:
  • 更新时间:2022-12-27 18:20:18
  • 软件类别:
  • 相关链接:未知官方
  • 网友评分:
  • 应用平台:Win2000/WinXP/Win2003
  • 演示地址:演示地址

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

例如:

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

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

1
2
<span style="color: #800000;">            input</span>{<span style="color: #ff0000;">                 border</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>; <span style="color: #ff0000;">                 padding</span>:<span style="color: #0000ff;"> 7px 0px</span>;<span style="color: #ff0000;">                 border-radius</span>:<span style="color: #0000ff;"> 3px</span>; /*css3属性IE不支持*/<span style="color: #ff0000;">                 padding-left</span>:<span style="color: #0000ff;">5px</span>;
            }

效果图:

样式属性含义:

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

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

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

比如:属性placeholder

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

input点击发光特效:

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

效果图:

到此这篇关于html页面输入框input的美化就介绍到这了。如同未曾开始的故事,就被作者手中的笔生生刻下了结局。早安!更多相关html页面输入框input的美化内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

关键词: 输入框 html

下载地址

下载失败问题?【我要反馈】

提示:好代码网站资源是由用户投稿上传,内容来自互联网,本站只做免费推荐用于学习分享,如有版权及其他问题,请联系小编处理!

下载“jQuery焦点无缝轮播图特效”地址:

  • 日榜
  • 周榜
  • 月榜

推荐下载

  • 开发手册
  • 常用软件