分享好友教程首页教程搜索频道列表

css3 placeholder字体颜色大小

2021-06-23 22:4711300
+关注32
核心提示:一、须知placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器...

一、须知

placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占位文本。

 

二、设置placeholder文字颜色、字号

方式1:因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。

::-webkit-input-placeholder { 
  color: #999;
  font-size: 16px;
}

::-moz-placeholder { 
  color: #999;
  font-size: 16px;
}

:-ms-input-placeholder { 
  color: #999;
  font-size: 16px;
}


方式2:建议使用该方式 如果是在手机客户端webview 只使用-webkit内核方式即可。

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #666;
  font-size: 16px;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #666;
  font-size: 16px;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #666;
  font-size: 16px;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #666;
  font-size: 16px;
}


本文标签:#css#提示
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

纯CSS实现多标签自动显示超出数量的思路详解

    有多个宽度不同的标签水平排列,当外层宽度不足时,会自动提示超出的数量,这篇文章主要介绍了纯 CSS 实现多标签自动显示超出数量的思路详解,需要的朋友可以参考下

小黑 CSS相关2026-07-20

使用CSS实现渐变圆角边框的效果

    这篇文章给大家介绍了如何使用CSS实现渐变圆角边框的效果,有没有发现在现如今的网站应用中,我们大量的使用到这类场景,在解决这类问题时,我们利用了css的mask与mask-composite属性

小黑 CSS相关2026-07-20

css3收货地址平行四边形的线条样式示例代码

    这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

小黑 CSS相关2026-07-20

CSS实现空心尖角的示例代码

网络 CSS相关2026-07-20

CSS3用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~

小黑 CSS相关2026-07-20

下一篇
我来说两句
抢沙发