修改input元素placeholder样式的方法

您所在的位置：网站首页 › css点击改变样式怎么改颜色 › 修改input元素placeholder样式的方法

修改input元素placeholder样式的方法

2024-07-12 16:20| 来源: 网络整理| 查看: 265

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

{/* React的写法 */}

默认情况下的显示如下： 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; }

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

【本文地址】

修改input元素placeholder样式的方法

修改input元素placeholder样式的方法

今日新闻

推荐新闻