input输入框是网页必不可少的组件，可是每个欣赏器对于输入框的显现样式各有差别

比方：

上图别离就是谷歌欣赏器跟IE欣赏器自带显现的输入框，样式也不足人意，所以大多城市本人写样式

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

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

后果图：

样式属性露义：

border: 1px solid #ccc;  /*设置输入框边框，边缘线的颜色、大小、及实线虚线*/

padding: 7px 0px; /*设置输入框高度，也可以用height，可是用height的话，输入框的光标会置于顶部，还要设置其他样式去固定，而且还不必定会兼容很好*/

border-radius: 3px; /*这个属性石css3内里的,IE不支持*/

padding-left:5px;  /*让广告距离左边5个像素，一开端光标是贴着左边输入框的边缘的*/

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

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

比如：属性 placeholder

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

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的美化