CSS 表单

CSS - 表单 & 输入框

通常每个浏览器有自己的默认渲染样式。所以需要修改元素的默认样式 ：

input[type=text]{
	height: 35px;
	border: 1px solid #cccccc;
	width: 200px;
	border-radius: 3px;
	outline: none; 
}

input 最基本的修改是 height（高） 、border（边框）、width（宽度）。
需要的话可以添加 border-radius（圆角，这是css3的属性）。
outline: none; 去除获取焦点时，显示的轮廓

图1代码

CSS - 表单 & 输入框 & 对齐

对齐方式各有不同，根据需要选择最佳的对齐方式。 图2代码

CSS - 表单 & 按钮

input[type=button]{
	width: 80px;
	height: 35px;
	color: #fff;
	font-size: 15px;
	background-color: #409eff;
	border:1px solid #409eff;
	border-radius: 3px;
	cursor: pointer;/** 鼠标移上去，光标呈现为指示链接的指针（一只手） **/
}
input[type=button]:hover{
	background-color: #60a7f1;
}

<input type="button"  value="提交"/>

图3代码

CSS - 表单 & 下拉列表

select{
	color: #606266;
	font-size: 16px;
	letter-spacing:2px; /** 字间距 **/
	width: 200px;
	height: 30px;
	outline: none; /** 去除蓝色轮廓  **/
	border: 1px solid #dddddd;
	border-radius: 3px;
	padding-left: 5px;
}

CSS - 表单 & 文本域

textarea{
	width: 300px;
	resize: none; /** 用户不能改变元素尺寸大小 **/
	border: 1px solid #cccccc;
	padding: 8px; 
	outline: none; /** 去除蓝色轮廓  **/
	border-radius: 3px;
	font-size: 16px;
}