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的美化内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!