设置input标签placeholder字体颜色

  1. 云栖社区>
  2. 博客>
  3. 正文

设置input标签placeholder字体颜色

frontman 2016-08-17 15:45:00 浏览338
展开阅读全文

有时会遇到这样的需求,输入框的默认提示文字与用户输入的文字不同。

<input className="city" placeholder="城市"/>
input {color:#ff7800}

如果只是设置input的颜色的话是达不到想要的效果的,css3有关于设置placeholder的属性-input-placeholder

  • Webkit内核的浏览器和Microsoft Edge使用的是伪元素::-webkit-input-placeholder
  • 火狐19+使用的是伪元素::-moz-placeholder
  • 火狐4-18使用伪类:-moz-placeholder
  • Microsoft 10和11使用伪类:-ms-input-placeholder
  • 伪类和伪元素可以参考这篇文章 css伪类与伪元素
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}

*也可以换为input,以下demo的实现为

<input className="city" placeholder="城市"/>
input{color:#333;}
input::-webkit-input-placeholder {
    color: ff7800;
}
input:-moz-placeholder {
    /* FF 4-18 */
    color: ff7800;
}
input::-moz-placeholder {
    /* FF 19+ */
    color: ff7800;
}
input:-ms-input-placeholder {
    /* IE 10+ */
    color: ff7800;
}

img_88098f1932001384194b5384e60af60a.gif

参考文档

网友评论

登录后评论
0/500
评论
frontman
+ 关注