html中input中文字的字体颜色,修改input框中placeholder的字体颜色

placeholder 是HTML5中的新属性,适用于以下的 类型:text, search, url, telephone, email 以及 password。

设置对象文字占位符的样式。

::placeholder 伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。

当表单背景色为类似的颜色时它可能效果并不是很明显,那么就可以使用这个伪元素来改变文字占位符的颜色。

需要注意的是,除了Firefox是 ::[prefix]placeholder,其他浏览器都是使用 ::[prefix]input-placeholder

Firefox支持该伪元素使用text-overflow属性来处理溢出问题。

::placeholder的使用示例:

input::-webkit-input-placeholder {

color: #999;

}

input:-ms-input-placeholder { // IE10+

color: #999;

}

input:-moz-placeholder { // Firefox4-18

color: #999;

}

input::-moz-placeholder { // Firefox19+

color: #999;

}

兼容性问题:

c144e5b906aa69241aadfacccf5c3b03.png

示例:

HTML代码:

CSS代码:#userName::-webkit-input-placeholder {

color: red;

}

#userName:-moz-placeholder {  // Firefox4-18

color: red;

}

#userName::-moz-placeholder {  // Firefox19+

color: red;

}

#userName:-ms-input-placeholder {  // IE10+

color: red;

}

效果:

5687d9b4197bfda8f7c5ca3d8878cde6.png

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值