input的样式设置

<input>

输入框：type=text

去掉输入框的默认的样式：

-web-kit-appearance:none;

-moz-appearance: none;

<input type="text" class="form_input" placeholder="请输入姓名"/>

placeholder：隐式的显示文字，当输入内容后将消失。

<style>

input{

font-size:1.4em; 设置输入框中字体的大小

height:2.7em; 设置输入框的高度

border-radius:10px; 设置输入框的圆角的大小

border:1px solid #c8cccf;设置输入框边框的粗细和颜色

color:#986655; 设置输入框中文字的颜色

outline:0; 将输入框点击的时候出现的边框去掉

text-align:center; 设置输入框中文字的位置

display:block; 将输入框设置为块级元素

}

</style>

input::-webkit-input-placeholder { /* WebKit browsers*/

　　color:#999;font-size:14px;

　　}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18*/

　　color:#999;font-size:14px;

　　}

input::-moz-placeholder { /* Mozilla Firefox 19+*/

　　color:#999;font-size:14px;

　　}

input:-ms-input-placeholder { /* Internet Explorer 10+*/

　　color:#999;font-size:14px;

}

这一段代码的作用是改变placeholder的默认样式（颜色和字体大小）

按钮：type=button

<input type="button" id="button" name=""/>

<style>

#button{

width: 186px;/*按钮控件的宽度*/

/*text-align: center;按钮控件中文本居中显示*/

line-height: 500%;/*用百分比设置行高*/

padding-top: 0.1em;/*文本顶部的内边距*/

padding-right: 2em;/*文本右侧的内边距*/

padding-bottom: 0.95em;/*文本底部的内边距*/

padding-left: 2em;/*文本左侧的内边距*/

font-family: "Arial Black", Gadget, sans-serif;/*字体*/

font-size: 14px;/*字体大小*/

font-style: normal;/*字体样式*/

font-variant: normal;/*小写字母*/

font-weight: normal;/*文本不需要加粗*/

text-decoration: none;/*文本不需要下划线等*/

margin-top: 0px;/*外边框的距离*/

margin-right: 2px;/*外边框的距离*/

margin-bottom: 0px;/*外边框的距离*/

margin-left: 2px;/*外边框的距离*/

vertical-align: text-bottom;/*图像放在文本下面*/

display: inline-block;/*段落内生出内框*/

cursor: pointer;/*鼠标的形状*/

zoom:1;

outline-width:medium;/*整个轮廓的宽度*/

outline-color:inherit;/*轮廓的颜色*/

font-size-adjust:none;

font-stretch:normal;

border-top-left-radius:1em;/*圆角边框弧度*/

border-top-right-radius:1em;/*圆角边框弧度*/

border-bottom-left-radius:0.5em;/*圆角边框弧度*/

border-bottom-right-radius:0.5em;/*圆角边框弧度*/

box-shadow:0px 1px 2px rgba(1,1,1,1.2);/*给按钮增加阴影*/

color:#fef222;/*设置文本的颜色*/

border-top-color:#411c0c;/*边框的颜色*/

border-right-color:#337c0c;/*边框的颜色*/

border-bottom-color:#11110c;/*边框的颜色*/

border-left-color:#da7c0c;/*边框的颜色*/

border-top-width:5px;/*边框的粗细*/

border-right-width:5px;/*边框的粗细*/

border-bottom-width:5px;/*边框的粗细*/

border-left-width:5px;/*边框的粗细*/

border-top-style:solid;/*边框的样式*/

border-right-style:solid;/*边框的样式*/

border-bottom-style:solid;/*边框的样式*/

border-left-style:solid;/*边框的样式*/

background-image:none;/*背景图片*/

background-attachment:scroll;/*背景图片是否移动*/

background-repeat:repeat;/*允许重复*/

background-position-x:0%;/*背景的x轴坐标*/

background-position-y:0%;/*背景的y轴坐标*/

background-size:auto;/*背景图片的尺寸*/

background-origin:padding-box;/*背景图像相对于内边距框来定位*/

background-clip:padding-box;/*背景被裁剪到内边距框*/

background-color:#f78d1d;/*背景颜色*/

}

</style>