当前位置:建站教程 >> 前端 >> CSS设置input placeholder文本的样式

CSS设置input placeholder文本的样式

2015-01-13


前面写过一篇CSS设置选中文本样式的文章,不得不说CSS3的选择器功能十分强大。今天又发现了一个CSS的伪选择器,就是选择placeholder文本。

placeholder是HTML5  input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值。

当然我们今天讨论的不是placeholder这个属性,而是设置placeholder的文本样式的选择器。

实例demo

火狐和webkit核心浏览器的属性名字不一样,谁叫不是一个娘生的呢。

text
		
  • /* webkit 浏览器*/
  • #field1::-webkit-input-placeholder { color:#00f; }
  • #field2::-webkit-input-placeholder {
  • color:#090;
  • background:lightgreen;
  • text-transform:uppercase;
  • }
  • #field3::-webkit-input-placeholder {
  • font-style:italic;
  • text-decoration:overline;
  • letter-spacing:3px;
  • color:#999;
  • }
  • /* 火狐浏览器 */
  • #field1::-moz-placeholder { color:#00f; }
  • #field2::-moz-placeholder {
  • color:#090;
  • background:lightgreen;
  • text-transform:uppercase;
  • }
  • #field3::-moz-placeholder {
  • font-style:italic;
  • text-decoration:overline;
  • letter-spacing:3px;
  • color:#999;
  • }

当然,和CSS设置::selection选中文本样式一样,你只能设置几个和文本有关系的CSS样式:Color, font-style, font-varian, background, text-decoration
实例demo

PS:IE从IE10才开始支持placeholder属性,伪选择器名字还不得而知,估计是加前缀-ms-了

上一页:  js 返回上一页和刷新    下一页:  CSS书写规范及顺序