修改input元素placeholder样式的方法_修改input placeholder样式

我们时常需要跟input输入框打交道，很多情况下都要对placeholder的内容进行修改，例子：

{/* React的写法 */}
<input type="text" placeholder={'placeholder'}/>
1
2

默认情况下的显示如下：

我们是没法直接对input元素设置样式来更改placeholder，需要通过伪元素 ::-webkit-input-placeholder 的方式来修改样式：

::-webkit-input-placeholder {
    color: red;
    font-size: 20px;
    font-weight: bolder;
}
1
2
3
4
5

显示的效果：

这里补充一下针对不同浏览器的用法：

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: red;
    font-size: 20px;
    font-weight: bolder;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: red;
    font-size: 20px;
    font-weight: bolder;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: red;
    font-size: 20px;
    font-weight: bolder;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
    font-size: 20px;
    font-weight: bolder;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

若对你有帮助，可以支持一下作者创作更多好文章哦~