css输入框提示文字颜色,CSS3自定义input光标及placeholder提示文字颜色

美化input对与前端工程师来说会经常碰到，那么如何通过css3来自定义input光标，placeholder提示文字，颜色等属性呢？其实css3里提供了专门的规则属性来实现input的自定义化，来帮助前端工程师最大程度的还原视觉设计稿，具体实现代码如下：

css代码

由于不同的浏览器兼容性不同，所以针对不同的浏览器有不同的写法/* 通用 */

::-webkit-input-placeholder { color:#f00;caret-color:#f00;}

::-moz-placeholder { color:#f00;caret-color:#f00;} /* firefox 19+ */

:-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>

优美主题_umtheme.com

html,body{ margin: 0; padding: 0; background:#202939}

.box{ max-width: 185px; text-align: center; margin: 0 auto; padding: 100px 0;}

input{ clear: both; display: block; margin: 15px 0px;font-size: 14px; line-height: 30px;border: medium none; padding: 0 5px;caret-color:#f66;}

/* 通用 */

::-webkit-input-placeholder { color:#f66; }

::-moz-placeholder { color:#f66; } /* firefox 19+ */

:-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的自定义美化，虽然只是前端工作上的细节处理，但是完善这样细小的差异可以尽可能的还原视觉设计稿，才能获得更高质量的还原效果。