怎样修改输入框placeholder文字颜色大小?

2018-05-17CSS820
  • 详情内容
  • 留言点评

placeholder属性主要用于提供可描述输入字段预期值的提示信息(hint)。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。placeholder属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password,也适用于textarea文本框。

了解HTML5的人应该知道,placeholder是HTML5中新增的属性,该属性的作用是规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入之前显示在输入字段中,会在用户输入字段后消失,有些浏览器则是获得焦点后该提示便消失(如Safari、IE)。因为是HTML5中新增的属性,所以会存在兼容性问题,下面益吾库就顺便说说浏览器的支持情况:

IE10+、Firefox、Opera、Chrome 和 Safari 均支持 placeholder 属性。IE9及以下版本不支持input的placeholder属性。多数国产浏览器都与这些浏览器同内核,较新版本浏览器应该都已支持。

placeholder的用法实例:

<input type="text" placeholder="请输入您的称呼">

运行后你会发现,该提示文字会有自己默认的颜色,因浏览器而异,字号则是继承input样式font-size定义。有的时候,我们并不希望采用浏览器默认颜色,而且还想更改字体大小,这种情况该怎么办呢?好在有万能的hack css,以下为具体样式代码:

<style>
        input::-webkit-input-placeholder{
            color:red;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:red;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:red;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:red;
        }
</style>

针对不同浏览器或不同版本的浏览器需用不同写法,需要添加相应的前缀,值得注意的是:

1、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀,且是双冒号,写的时候还要带上input;

2、针对火狐浏览器则有两种写法,一种是针对低版本,一种是针对高版本,二者都需要带上-moz-前缀。要点1:火狐低版本的使用冒号(:),而高版本的使用双冒号(::);要点2:火狐浏览器不需要像webkit内核那样要带上input;

3、由于placeholder属性只在IE10+才支持,因此,针对IE10、IE11的写法是加上-ms-前缀,使用的是冒号(:),需要带上input。

看到这里,相信你对placeholder属性自定义样式已有充分了解,而且关于伪类样式的冒号与双冒号问题,也有了一个初步了解。如果还有疑问,欢迎留言探讨。

欢迎点评!也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
0

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看