今日在写静态页面时,在textarea添加了placehoder属性,由于想替换placeholder属性文字的默认颜色.
起初我是直接找到textarea标签直接对其样式修饰:
textarea {color:#cccccc};
然而发现只是改变了textarea输入框的文字颜色,而placeholder中的文字颜色并没有起到作用,于是就找到了万能的百度,ememem~,整理如下:
html:
<textarea placeholder="CreamFields"></textarea>
css:
textarea::-webkit-input-placeholder {
color: #cccccc;
}
酱紫就可以直接完美达到了效果了
兼容性问题及注意事项:
适用范围:
placeholder属性适用于下面的input类型:text、search、url、tel、email、password、textarea.
兼容性:
IE10+、Firefox、Opera、Chrome、Safari均支持placeholder属性.IE9及以下版本不支持input的placeholder属性.
1、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀,且是是双冒号,写的时候还要带上input
2、针对FireFox则有两种写法,一种是针对低版本的,一种是针对高版本的,二者都需要带上-moz-前缀
a):火狐低版本的使用冒号(:),而高版本的使用双冒号(::);
b):火狐浏览器不需要像webkit内核那样要带上input
3、placeholder属性只在IE10+才支持,因此,针对IE10、IE11的写法是加上-ms-前缀,使用的是冒号(:),需要带上input
**强调:冒号与双冒号的问题,还有是否需要加上input**