如何使用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

Answer 1

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

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

带萨斯 ：

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

如果你想使用JavaScript，只需在Click事件上添加一个类

，例如：

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

然后：

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

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>

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