如何使用JavaScript将占位符的颜色更改为透明。

Question

我正在尝试更改占位符的颜色，但我无法正确调用元素的javascript，请您帮忙。

我正在学习JavaScript，并尝试使用所见即所得编辑器编辑此内容，但由于内容是动态的，自动完成的整个功能停止工作了。

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

- Jaroslav Melich

---

如何更改占位符的颜色 - Alessandro

::placeholder { opacity: 0 } - DedaDev

Answer 1

除非您有某些条件需要添加类到输入框，否则不需要使用JavaScript来实现该功能，可以使用Sass或纯CSS：

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

使用Sass：

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

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

像这样：

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

然后:

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

- Sersif Samir

Answer 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>

- Sajad Haibat

---

你好，感谢您的回复。这似乎有效，但它改变了正在输入的文本，而我想要更改默认显示的文本。 这是一个搜索栏的输入字段，在那里写着“在此键入”，我想通过删除此文本并将输入字段保留为空来进行A/B测试，因此基本上将颜色更改为透明。 - Jaroslav Melich

您想使占位符透明还是正在输入的文本？ - Sajad Haibat

这段文本，我已经根据你的建议解决了，所以谢谢！ - Jaroslav Melich

Answer 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;
        }

- Piyush Teraiya