如何使用 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，您可以使用 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 2

您不需要 javascript 来执行此操作，除非您有一些条件尝试将 class 添加到输入中，然后使用 sass 或纯 css :

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

与 sass :

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

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

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

然后 :

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

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

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

How to change placeholder color to transparent with javascript

html

javascript

css

placeholder