CSS 表单

CSS - 表单 & 输入框

输入框1.jpg

图1

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

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.png

图2

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

CSS - 表单 & 按钮

按钮.jpg

图3
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;
}

文本域.jpg