温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

修改input框中placeholder的字体颜色

发布时间:2020-07-12 19:21:33 来源:网络 阅读:12606 作者:frwupeng517 栏目:开发技术

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


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

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


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


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

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


::placeholder的使用示例:

<input type="text" 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;
}



兼容性问题:

修改input框中placeholder的字体颜色


示例:

HTML代码:

<input type="text" id="userName" placeholder="请输入用户名">


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;
}


效果:

修改input框中placeholder的字体颜色



向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI