关于表单元素input的placeholder属性

1、自定义颜色

默认的文字占位符颜色为浅灰色，也可以使用伪类/伪元素来改变它的颜色。

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {  /*----- IE10+ -----*/
	color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {  /*----- Firefox4-18 -----*/
	color: #c7c7c7;
}
input::-moz-placeholder,
textarea::-moz-placeholder {  /*----- Firefox19+ -----*/
	color: #c7c7c7;
}

注：除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。

 

 

2、获取焦点清空

只有输入字段时，占位符才会消失，这样会影响用户体验，而如下两种方式获得焦点便会自动清空占位符：

方式一：

<input type="text" placeholder="请输入" onfocus="this.placeholder=''" onblur="this.placeholder='请输入'">

方式二：

/*----- WebKit -----*/
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder { color:transparent; }
/*----- IE10+ -----*/
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder { color:transparent; }				
/*----- Firefox4-18 -----*/
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder { color:transparent; }			
/*----- Firefox19+ -----*/
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder { color:transparent; }

3、溢出

 

在手机等设备上搜索框和表单字段经常会缩的很短,有时输入框并不能完全显示文字占位符,那么它便会被生硬的"切断"。

 

为了防止出现这种效果,可以使用CSS text-overflow: ellipsis; 来省略中间部分文字。

input[placeholder] { text-overflow: ellipsis; }
::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
input:-moz-placeholder { text-overflow: ellipsis; }