美化input对与前端工程师来说会经常碰到，那么如何通过css3来自定义input光标，placeholder提示文字，颜色等属性呢？其实css3里提供了专门的规则属性来实现input的自定义化，来帮助前端工程师最大程度的还原视觉设计稿，具体实现代码如下：
css代码
由于不同的浏览器兼容性不同，所以针对不同的浏览器有不同的写法/*通用*/
::-webkit-input-placeholder{color:#f00;caret-color:#f00;}
::-moz-placeholder{color:#f00;caret-color:#f00;}/*firefox19+*/
:-ms-input-placeholder{color:#f00;caret-color:#f00;}/*ie*/
input:-moz-placeholder{color:#f00;caret-color:#f00;}
/*webkit专用*/
#field2::-webkit-input-placeholder{color:#00f;caret-color:#00f;}
#field3::-webkit-input-placeholder{color:#090;caret-color:#090;background:lightgreen;text-transform:uppercase;}
#field4::-webkit-input-placeholder{font-style:italic;text-decoration:overline;letter-spacing:3px;color:#999;}
/*mozilla专用*/
#field2::-moz-placeholder{color:#00f;caret-color:#00f;}
#field3::-moz-placeholder{color:#090;caret-color:#090;background:lightgreen;text-transform:uppercase;}
#field4::-moz-placeholder{font-style:italic;text-decoration:overline;letter-spacing:3px;color:#999;}
/*定义光标颜色*/
input{caret-color:#f66;}
.input2{caret-color:#005FFF;}
.input3{caret-color:#090;}
.input4{caret-color:#999;}
完整实例代码html>
优美主题
html,body{margin:0;padding:0;background:#202939}
.box{max-width:185px;text-align:center;margin:0auto;padding:100px0;}
input{clear:both;display:block;margin:15px0px;font-size:14px;line-height:30px;border:mediumnone;padding:05px;caret-color:#f66;}
/*通用*/
::-webkit-input-placeholder{color:#f66;}
::-moz-placeholder{color:#f66;}/*firefox19+*/
:-ms-input-placeholder{color:#f66;}/*ie*/
input:-moz-placeholder{color:#f66;}
/*webkit专用*/
.input2::-webkit-input-placeholder{color:#005FFF;caret-color:#005FFF;}
.input3::-webkit-input-placeholder{color:#090;caret-color:#090;background:lightgreen;text-transform:uppercase;}
.input4::-webkit-input-placeholder{font-style:italic;letter-spacing:3px;color:#999;caret-color:#999;}
/*mozilla专用*/
.input2::-moz-placeholder{color:#005FFF;caret-color:#005FFF;}
.input3::-moz-placeholder{color:#090;caret-color:#090;background:lightgreen;text-transform:uppercase;}
.input4::-moz-placeholder{font-style:italic;letter-spacing:3px;color:#999;caret-color:#999;}
/*定义光标颜色*/
input{caret-color:#f66;}
.input2{caret-color:#005FFF;}
.input3{caret-color:#090;}
.input4{caret-color:#999;}
对于input的自定义美化，虽然只是前端工作上的细节处理，但是完善这样细小的差异可以尽可能的还原视觉设计稿，才能获得更高质量的还原效果。
