input设置placeholder无效解决办法

一、设置placeholder的方法

placeholder属性用来设置控件内部的提示信息

<input type="text" placeholder="请输入用户名">

改变placeholder的样式:

input::placeholder {
    color: red;
    font-size: 22px;
}

二、各浏览器样式兼容设置

1、针对谷歌浏览器的设置方式:

input::-webkit-input-placeholder {
    color: red;
    font-size: 22px;
}

2、针对火狐浏览器的设置方式:

input::-moz-placeholder {
    color: red;
    font-size: 22px;
}

3、针对IE浏览器的设置方式:

input:-ms-input-placeholder {
    color: red;
    font-size: 22px;
}

三、设置placeholder的样式无效–解决方法

设置placeholder方法无效的原因:

如果在某些公共样式中,已经对placeholder的样式进行了设置,再次对placeholder的样式进行设置时,就会无效,

解决方法是,给样式加 !important; 增加权重即可。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注