如何使用javascript将占位符颜色更改为透明答案

【问题标题】：How to change placeholder color to transparent with javascript如何使用javascript将占位符颜色更改为透明
【发布时间】：2020-01-23 10:38:15
【问题描述】：

我正在尝试更改占位符的颜色，但我无法让 javascript 有权调用该元素，您能帮帮我吗？

我刚刚学习 javascript，我尝试使用 WYSIWYG 编辑器对其进行编辑，但由于内容是动态的，因此自动完成的整个功能停止工作。

HTML

<input id="search" type="text" name="q" value="" class="input-text" maxlength="128" placeholder="Type here" autocomplete="off">

CSS

header .navbar .sc-bar #search_mini_form input.input-text

【问题讨论】：

How TO - Change Placeholder Color
::placeholder { opacity: 0 }

标签： javascript html css placeholder

【解决方案1】：

你不需要 javascript 来做到这一点，除非你有一些条件尝试将类添加到输入中，然后使用 sass 或纯 css：

input#search::placeholder{
color:red;}

与萨斯：

input{
&#search{
    &::placeholder{
        color : red
    }
 }
}

如果您想使用 javascript，只需在点击事件上添加一个类，例如：

var d = document.getElementById("div1");
d.className += " otherclass";

然后：

input.otherclass::placeholder{
 color:red;
}

【讨论】：

【解决方案2】：

我认为不需要使用 javascript，你可以使用 css 来做到这一点。只需在您的 css 文件中添加以下代码即可。

<style>
::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: red;
}
</style>

【讨论】：

您好，感谢您的回复。这似乎可行，但它改变了正在输入的文本，但我想更改默认显示在那里的文本。它是搜索栏的输入字段，其中写着“在此处输入”，我想通过删除此文本并将输入字段留空来进行 A/B 测试，因此基本上将颜色更改为透明。
您想让占位符透明还是正在输入的文本？
文本，我已经根据您的建议解决了，谢谢！

【解决方案3】：

您可以使用此代码

    <style type="text/css">
        ::-webkit-input-placeholder { /* Chrome */
          color: red!important;
        }
        :-ms-input-placeholder { /* IE 10+ */
          color: red!important;
        }
        ::-moz-placeholder { /* Firefox 19+ */
          color: red!important;
          opacity: 1;
        }
        :-moz-placeholder { /* Firefox 4 - 18 */
          color: red!important;
          opacity: 1;
        }

【讨论】：