有没有办法可以更改输入占位符文本的颜色？答案

【问题标题】：Is there a way I can change the color of my input placeholder text?有没有办法可以更改输入占位符文本的颜色？
【发布时间】：2020-11-11 08:32:54
【问题描述】：

可以通过查看http://trouver.sabalo.design 上的源代码或下面的 sn-p 找到所有内容。 :)

我正在尝试获取显示“在此处输入代码”的占位符文本，以匹配旁边显示“GO”的按钮的颜色，以及当您在框中输入内容时的外观。

当您在框中输入内容时，它看起来就像我希望“在此处输入代码”在有人开始输入之前的样子。

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    -webkit-animation: gradient 15s ease infinite;
            animation: gradient 15s ease infinite;
}

@-webkit-keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

<!DOCTYPE html>
<html lang="en" >
   <head>
      <meta charset="UTF-8">
      <title>Trouver by SABALO</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
      <link rel='stylesheet' href='https://codepen.io/P1N2O/pen/xxbjYqx.css'>
      <link rel="stylesheet" href="./style.css">
   </head>
   <body>
      <!-- partial:index.partial.html -->
      <img src="/e1c85d81-b56f-41f3-bddb-634fe3bde046_200x200.png" style="background-color: white;">
      <br>
      <br>
      <h1 class="text-light">Trouver by SABALO</h1>
      <div class="btn-group mt-2 mb-4" role="group" aria-label="actionButtons">
         <input class="d-block btn btn-outline-light" type="text" id="code" placeholder="Enter Code Here"/><button class="d-block btn btn-outline-light" type="button" value="Go" onclick="redirectUser();">Go</button>
      </div>
      <h6 class="text-light small font-weight-bold"></h6>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" integrity="sha256-qM7QTJSlvtPSxVRjVWNM2OfTAz/3k5ovHOKmKXuYMO4=" crossorigin="anonymous"></script>
      <!-- partial -->
      <script>
         function redirectUser() {
         var code = document.getElementById("code").value;
         if(code == "0"){
           window.location.href = "https://www.w3schools.com/";
         }
         else if(code == "1"){
           window.location.href = "https://www.google.com/";
         }
         else if(code == "2"){
           window.location.href = "https://www.bing.com/";
         }
         else{
           alert("Error: Code not found");
         }
         }
      </script>
   </body>
</html>

【问题讨论】：

标签： html css input colors placeholder

【解决方案1】：

您可以使用::placeholder {color: red;} 更改 Chrome、Firefox、Opera、Safari 10.1+ 的占位符颜色。

它肯定会解决你的问题，但如果它没有让我知道在 cmets 中，我会尽力帮助你。

【讨论】：

太好了，这改变了占位符的颜色，这部分是我需要做的。我希望它的行为就像“开始”按钮一样，我已经将其设置为在悬停时背景变为白色并将文本更改为黑色 - 也在悬停时。在 go 按钮上一切正常，但我无法让占位符文本发挥相同的作用。
@ourmoneycolorado 很遗憾我无法完全解决您的问题，但您能帮我一个忙，每当您解决问题时，请告诉我您是如何解决的，我很想知道你是如何解决的，如果我能帮助你一点点，请接受并支持我的回答，这对我来说意义重大。
@ourmoneycolorado 嘿，快来看看我是否解决了您的问题，还是需要提高我的技能？