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

  • Post author:
  • Post category:其他


美化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;car