Placeholder not visible after change color on text

Question

I try to change placeholder color to graytext but its not working....i've been stuck in 3 hours still no solution...here is the code

<div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Email" style="background-color: white; color: gray; border: 1px solid gray;" placeholderstyle="color: gray;">
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" class="form-control" id="password" placeholder="Password" style="background-color: white; color: gray; border: 1px solid gray;" placeholderstyle="color: gray;">
    </div>

Hope its help

score 0 · Answer 1 · answered Jul 20 '23 at 13:10

it seems you can not change placeholder style inline but you can do it with css like this:

    .form-control::placeholder{
        color: red;
    }

Full example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .form-control::placeholder{
            color: red;
        }
    </style>
</head>
<body>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Email" style="background-color: white; color: gray; border: 1px solid gray;" placeholderstyle="color: gray;">
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" class="form-control" id="password" placeholder="Password" style="background-color: white; color: gray; border: 1px solid gray;" placeholderstyle="color: gray;">
      </div>
</body>
</html>

Placeholder not visible after change color on text

1 Answers1