css自定占位文字(placeholder)的款式的方式示例

2021-01-20 17:57 jianzhan

自定占位文字(placeholder)的款式

当大家对input元素或textarea元素写CSS款式的情况下, 假如必须自定占位文字(也便是placeholder)的款式的情况下如何办?
CSS有1个伪元素挑选器::placeholder能够处理大家的难题.

用法

HTML

<input placeholder="我是鲜红色的!">

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

結果

但要留意, 这个伪元素挑选器是1个试验性的特点, 还必须1些光阴待访问器适配.
 

因而, 大家要加上1些前缀来应用它, 以下所示.

input::-webkit-input-placeholder {
    color: #999;
}
/* IE10+ */
input:-ms-input-placeholder {
    color: #999;
}
/* Firefox4⑴8 */
input:-moz-placeholder {
    color: #999;
}
/* Firefox19+ */
input::-moz-placeholder {
    color: #999;
}
input::placeholder {
  color: #999;
}

textarea::-webkit-input-placeholder {
    color: #999;
}
/* IE10+ */
textarea:-ms-input-placeholder {
    color: #999;
}
/* Firefox4⑴8 */
textarea:-moz-placeholder {
    color: #999;
}
/* Firefox19+ */
textarea::-moz-placeholder {
    color: #999;
}
textarea::placeholder {
  color: #999;
}

参照连接:
MDN - ::placeholder
Can I Use - ::placeholder

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。