css/html中的三大输入占位符样式示例

这是一个关于css/html中输入占位符用法的简短教程，并附有实例

placeholder 是一个显示在输入控件中的简短文本，用于告诉用户该输入控件的情况，它的作用就像输入元素的标签。这是在HTML5中引入的，你可以查看我以前的文章。

CSS提供了非标准的伪选择器来改变输入元素的样式。

::placeholder - 最新的浏览器 ::-webkit-input-placeholder - Chrome,opera,safari浏览器 ::-moz-placeholder - Mozilla Firefox 19以上的浏览器 :-ms-input-placeholder - Internet explorer 10以上 :-moz-placeholder - Firefox 4到18的浏览器

需要注意的一点是，这些选择器不是按组定义的，而是可以定义为一个单独的选择器。

可以为html中的输入控件定义占位符，如下所示

改变占位符文本的颜色并不像这样简单。

本博客包括以下内容

• 用css改变默认的占位符颜色
• 聚焦时改变占位符

如何在css中改变占位符的默认颜色？

改变占位符的颜色是与浏览器有关的，所以我们必须使用供应商特定的CSS伪元素。

HHTML占位符的例子：

input::-webkit-input-placeholder { 
  color: blue;
}
input::-moz-placeholder { 
  color: blue;
}
input:-ms-input-placeholder { 
  color: blue;
}
input:-moz-placeholder { 
  color: blue;
}

如何在css中改变占位符文本为大写字母？

CSS

.firstname::-webkit-input-placeholder {
   text-transform: uppercase;
}

.firstname:-moz-placeholder { 
   text-transform: uppercase;
}

.firstname::-moz-placeholder {  
   text-transform: uppercase;
}

.firstname:-ms-input-placeholder { 
   text-transform: uppercase;
}