海滨擎蟹

CSS3 修改 input 的 placeholder 属性默认的字体、颜色和大小

兼容性

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

修改 placeholder 默认的字体、颜色和大小

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

::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
  font-size: 16px;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
  font-size: 16px;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  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;
}

[notice]个人直接用了方式 2,测试可用。其中的 textarea 可以根据需要选择是否去除,最好在 input 前加上一些详细层级,而不是应用到全局。[/notice]

参考 :css3 placeholder字体颜色大小

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »