Question

通过查看http://trouver.sabalo.design上的源代码或下面的代码片段，可以找到所有内容。：）

我试图获取表示“在此处输入代码”的占位符文本，以匹配其旁边显示“ 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>

Answer 1

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

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

有什么方法可以更改输入的占位符文本的颜色？

1 个答案: