CSS3中placeholder属性

今日在写静态页面时,在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**

猜你喜欢

转载自blog.csdn.net/keepyourbelief/article/details/80608257