如何动态修改 placeholder 的颜色？

Bertha 。 2022-01-17 16:47 393阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

CSS：用这些伪类就可以让placeholder变色了

（需要添加opacity:1,因为firefox默认的有一个透明图，要把它的这个属性给重写掉）

.invalid:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color: red;
                opacity: 1;
            }
            .invalid::-moz-placeholder { /* Mozilla Firefox 19+ */
                color: red;
                opacity: 1;
            }
            input.invalid:-ms-input-placeholder{
                color: red;
            }
            input.invalid::-webkit-input-placeholder {
                color: red;
            }

JS：给input加上invalid class就行了

$("#name").attr("class","invalid");

HTML：将class设置成invalid就行

<input class="invalid" type="text" id="name" name="name" placeholder="请输入姓名">

参考自：https://segmentfault.com/q/1010000004216231

转载于:https://my.oschina.net/u/2351298/blog/819345

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/7d41fbd311944989b6968e524fd8be9f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，393人围观）

还没有评论，来说两句吧...

相关阅读

相关修改placeholder字体颜色

html修改placeholder字体颜色因为不同浏览器存在兼容性问题，这里主要设置webkit内核浏览器、火狐浏览器、IE浏览器等，代码如下： /

阳光穿透心脏的1/2处/ 2023年10月03日 19:04/ 0 赞/ 17 阅读

相关微信小程序修改input中的placeholder字体颜色

wxml <input class="search-size" confirm-type="search" value="{ {inputValu

朱雀/ 2023年07月25日 09:29/ 0 赞/ 336 阅读

相关修改input placeholder的颜色

修改input placeholder的颜色 input::-webkit-input-placeholder{color: rgb(251, 231, 208);

Dear 丶/ 2023年06月07日 10:50/ 0 赞/ 2 阅读

相关 uniapp 中修改 placeholder默认字体颜色

<input placeholder-class="phcolor" placeholder="请输入" v-model="bankNum" type="number"

男娘i/ 2023年01月08日 07:27/ 0 赞/ 437 阅读

相关修改UITextField的placeholder颜色

修改UITextField的placeholder颜色使用属性 @property(nonatomic,copy) NSAttributedStri

冷不防/ 2022年07月29日 11:52/ 0 赞/ 222 阅读

相关如何简单修改input的placeholder样式

在做项目的时候，尤其事表单的时候，有时候input的placeholder的颜色值有点重，让我们一眼看过去分不清到底是不是已经填写的，为了更加分明，我们就需要修改一下place

喜欢ヅ旅行/ 2022年06月02日 01:16/ 0 赞/ 512 阅读

相关如何修改文字颜色

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过类似HTML的标记语法，它可以使普通文本内容具有一定的格式。但是它本身是不支持修改字体、字号与颜色等功能的！

不念不忘少年蓝@/ 2022年04月11日 12:00/ 0 赞/ 308 阅读

相关 HTML如何修改placeholder属性中文字颜色

今天在群里看到群友问了一个这样的问题，就是如何更改placeholder属性中文字的颜色，以前用过这属性，却是没更改过颜色，于是便试了试，中途遇到些问题，查找资料后特来总结一下

矫情吗；*/ 2022年03月19日 11:18/ 0 赞/ 375 阅读

相关 input placeholder属性样式修改(颜色,大小,位置)

[input placeholder属性样式修改(颜色,大小,位置)][input placeholder_] placeholder属性样式修改 placeho

Love The Way You Lie/ 2022年01月31日 14:04/ 0 赞/ 502 阅读

相关如何动态修改 placeholder 的颜色？

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] CSS：用这些伪类就可以让placeholder变色了

Bertha 。/ 2022年01月17日 16:47/ 0 赞/ 394 阅读