关于input的样式简单处理

html结构

<div class="main">
		<form action="">
			<input type="text" placeholder="Name">
		</form>
	</div>

初始input：

增加css代码

.main form input{
	display: block;/*变为块元素*/
	width: 50%;/*设置宽度*/
	margin: 0 auto;/*位置居中*/
	outline: 0;/*点击时去除边框*/
	border: none;/*去除外边框*/
	background-color: #fff;/*设置背景色*/
	padding: 10px 10px;/*设置输入内容的上下边距*/
	border-radius: 4px;/*设置圆角*/
	box-shadow: inset 1px 1px 6px 0 rgba(0,0,0,.3);/*设置内部阴影*/
	transition: all 250ms;/*鼠标划过时监听所有变化250ms*/
}
.main form input:hover{
	background: #ffe;/*鼠标滑过时背景颜色改变*/
    box-shadow: inset 1px 1px 6px 0 rgba(0,0,0,.9);/*鼠标划过时边框发生改变*/
}

增加css代码后的效果图：

鼠标划过时的效果图：

可根据自己的需求改变css样式。