CSS设置placeholder字体样式

CSS标准里是没有直接对placeholder设置样式的选择器,这里主要是通过各个浏览器的兼容前缀来给输入框的placeholder设置字体样式。

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

/* Mozilla Firefox 4 to 18*/
input:-moz-placeholder {   
  color:#999;
    font-size:14px;
}

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

/* Internet Explorer 10+*/
input:-ms-input-placeholder {  
  color:#999;
    font-size:14px;
}

注意:input后的冒号,有些事单个冒号,有些是双冒号。

版权声明:著作权归作者所有。

相关推荐

CSS应用苹果的San Francisco字体

优先选择苹果字体,并兼容其它平台的字体。font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,"Helvetica Neue",Arial,sans-serif;

JavaScript使用window.print()打印页面:样式设置、精确分页以及局部打印

大部分浏览器提供打印页面的功能,直接使用浏览器的打印功能是直接将整个页面打印出来,并且是自动分页。很多时候直接打印整个页面并不能满足我们的需要。有三方面的需求我们可能要考虑:样式设置:打印的样式和页面显示的样式不同,需要对设置打印样式。精确分页:需要根据具体的内容进行精确分页。局部打印:不需要打印整个页面,只需要打印页面的部分。html示例<!doctype html> &l

Html5使用CSS修改输入框的placeholder颜色

这里需要使用伪元素的方式对input的placeholder设置样式,且不同的浏览器伪元素不一样。兼容多个浏览器的方法:::-webkit-input-placeholder { /* WebKit, Blink, Edge */     color:    

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主

[译]Android UI设计与样式——dp和sp

朋友们,最近我一直在做一些Android UI设计和样式的培训课程。 我想和更多观众分享。 这是我的第一个android ui设计和样式教程。 我将在这个主题上写更多的内容。 那么现在开始吧...DP, SP & Pixels作为Android开发人员,我们始终希望我们的UI设计与设备无关。