CSS修改占位符颜色的方法

小编给大家分享一下CSS修改占位符颜色的方法,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

方法:先使用“::占位符”选择器选中需要修改的元素,然后给该元素添加“颜色:颜色值;“样式即可。注占位符是css3新增的选择器,在不同的浏览器需要加不同的前缀(“- ms - webkit -等)。

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

占位符这个属性是HTML5中新增的属性,作用是描述输入字段预期值的提示信息

如何修改占位符的颜色呢?

但是存在一定的浏览器兼容问题,以chorme为例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　,,,& lt; meta  charset=皍tf-8"比; 　　,,,& lt; style> 　　,,,, 　　,,,输入:-webkit-input-placeholder  { 　　,,,,,,,颜色:,# aab2bd; 　　,,,,,,,字体大小:,12 px; 　　,,,} 　　,,,input {//边框效果 　　,,,,,,,边界:,1 px  solid 红色; 　　,,,} 　　,,,& lt;/style> 　　& lt;/head> 　　& lt; body> 　　,,,, 　　,,,& lt; input 类型=皌ext",占位符=扒胧淙搿氨? 　　,,,, 　　& lt;/body> 　　& lt;/html>

chorme浏览器对应的选择器是<代码>输入::-webkit-input-placeholder

其他浏览器的选择器如下:

输入::-webkit-input-placeholder {/*大敌;WebKit,,眨眼,,Edge  */,,,color :,红色; 　　} 　　:-moz-placeholder {/*大敌;Mozilla  Firefox  4,用18,*/,,color :,红色; 　　} 　　::-moz-placeholder {/*大敌;Mozilla  Firefox  19 +, */,,color :,红色; 　　} 　　输入:-ms-input-placeholder {/*大敌;Internet  Explorer  10-11  */,,color :,红色; 　　} 　　输入::-ms-input-placeholder {/*大敌;Microsoft  Edge  */,,color :,红色; 　　} <李>

WebKit,眨眼,边缘浏览器等需要带上WebKit -前缀,且是双冒号,写的时候还要带上输入

<李>

针对火狐浏览器则有两种写法,都需要带上-moz——前缀。火狐低版本的使用冒号(:),而高版本的使用双冒号(::);火狐浏览器不需要带上输入。

<李>

占位符属性只在IE10 +才支持,IE10, IE11的写法是加上- ms -前缀,使用的是冒号(:),需要带上输入

看完了这篇文章,相信你对“CSS修改占位符颜色的方法”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

CSS修改占位符颜色的方法