我们时常需要跟input
输入框打交道,很多情况下都要对placeholder
的内容进行修改,例子:
{/* React的写法 */}
<input type="text" placeholder={'placeholder'}/>
默认情况下的显示如下:
我们是没法直接对input元素设置样式来更改placeholder,需要通过伪元素 ::-webkit-input-placeholder
的方式来修改样式:
::-webkit-input-placeholder {
color: red;
font-size: 20px;
font-weight: bolder;
}
显示的效果:
这里补充一下针对不同浏览器的用法:
::-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;
}
若对你有帮助,可以支持一下作者创作更多好文章哦~