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; 去除获取焦点时,显示的轮廓
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="提交"/>
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;
}