CSS3 input元素的美化，帮助我们优化页面的输入控件，提高用户体验。直接上CSS代码(本篇文章提供4中颜色的intput美化)：

.testTxt{
	width: 220px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	height: 25px;
	font-size: 15px;
	border: 1px solid #cccccc;
	outline: none;
	color: #808080;
	padding-left: 5px;
	margin-left:200px;
	margin-top:20px;
}
.green:focus {
	transition: border  linear .2s, box-shadow linear .5s;
	-moz-transition: border linear .2s, -moz-box-shadow  linear .5s;
	-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
	outline: none;
	border-color: rgba(19,105,172,.75);
	box-shadow: 0 0 3px rgba(19,105,192,.5);
	-moz-box-shadow: 0 0 3px rgba(241,39,232,.5);
	-webkit-box-shadow: 0 0 3px rgba(19,105,252,3);
}
.red:focus {
	transition: border  linear .2s, box-shadow linear .5s;
	-moz-transition: border linear .2s, -moz-box-shadow  linear .5s;
	-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
	outline: none;
	border-color: rgba(185,18,27,.75);
	box-shadow: 0 0 3px rgba(213,38,38,.5);
	-moz-box-shadow: 0 0 3px rgba(185,18,27,.5);
	-webkit-box-shadow: 0 0 3px rgba(185,18,27,3);
}
.blue:focus {
	transition: border  linear .2s, box-shadow linear .5s;
	-moz-transition: border linear .2s, -moz-box-shadow  linear .5s;
	-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
	outline: none;
	border-color: rgba(55,168,33,.75);
	box-shadow: 0 0 3px rgba(55,168,33,.5);
	-moz-box-shadow: 0 0 3px rgba(55,168,33,.5);
	-webkit-box-shadow: 0 0 3px rgba(55,168,33,3);
}
.black:focus {
	transition: border  linear .2s, box-shadow linear .5s;
	-moz-transition: border linear .2s, -moz-box-shadow  linear .5s;
	-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
	outline: none;
	border-color: rgba(81,71,73,.75);
	box-shadow: 0 0 3px rgba(81,71,73,.5);
	-moz-box-shadow: 0 0 3px rgba(81,71,73,.5);
	-webkit-box-shadow: 0 0 3px rgba(81,71,73,3);
}