javascript 无法更改输入的占位符颜色

fjnneemd 于 2023-03-06 发布在 Java

关注(0)|答案(2)|浏览(165)

我有一个输入，我试图改变占位符的颜色，在一些网站上，我相信我看到人们正在改变占位符的颜色
我试着用elem改变。值，但它没有任何意义的值和占位符是两个不同的东西，甚至。占位符，然后样式是不工作，你可以看到下面。找不到这样做的方法，我错过了什么吗？这里是我的代码：

const elem = document.getElementById("myInput");
 elem.placeholder.style.color = "green";

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="new">
      <input type="text" id="myInput" placeholder="type here" />
    </div>
  </body>
</html>

‏

JavaScript

来源：https://stackoverflow.com/questions/75637972/failed-to-change-placeholder-color-of-an-input

2条答案

按热度按时间

41ik7eoe1#

有一个简单的方法与css，而不是javascript
在css中，我们有一个伪元素叫做：：placeholder https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
你现在可能已经猜到了

#myInput::placeholder {
  color: green;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="new">
      <input type="text" id="myInput" placeholder="type here" />
    </div>
  </body>
</html>

赞(0）回复(0）举报 2023-03-06

vc9ivgsu2#

您可以更改2路HTML5 input placeholder颜色
例如，下面的HTML5代码：

<input type="text" class="withOut" placeholder="Without placeholder color">
<input type="text" class="withColor" placeholder="With placeholder color">

1.第一步仅使用CSS
正如您所看到的，我添加了ID来更改input placeholder的颜色。

.withColor::placeholder {
  color: red;
  opacity: 1;
}

1.第二步，我们还可以使用JavaScript更改占位符颜色

const ourChangeAbleInput = document.getElementsByClassName("withOut");
ourChangeAbleInput.classList.add("withColor")

就是这样：）

赞(0）回复(0）举报 2023-03-06

我来回答

javascript 无法更改输入的占位符颜色

2条答案

相关问题

热门标签

最新问答