Placeholder disappears when text color is changed

Question

Placeholder disappears when text color is changed

I have been struggling for 3 hours trying to change the placeholder color to graytext, but it's just not working. Here is the code I've been using:

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

Hopefully this code helps someone find a solution!

html css bootstrap-4

Answer 1

Answer №1

If you're looking to adjust the placeholder style in a more customized way, it's not possible to do so inline. However, you can achieve this using CSS. Here's an example of how you can change the placeholder color to red:

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

For a complete demonstration, here's how you can implement this in your HTML document:

<!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>

Answer 2

If you're looking to adjust the placeholder style in a more customized way, it's not possible to do so inline. However, you can achieve this using CSS. Here's an example of how you can change the placeholder color to red:

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

For a complete demonstration, here's how you can implement this in your HTML document:

<!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 disappears when text color is changed

Answer №1

Similar questions

Sketch the borders of the element (animated)

Exploring the world of three-dimensional graphics with the power of HTML5, canvas,

Is there a way to adjust the contents of an iframe to match the dimensions of the iframe itself?

Execute a JavaScript function when an HTML list element is clicked

What is the best way to design versatile div containers that combine the float property with fluid dimensions?

Create a scrollable Bootstrap table without impacting the layout grid system

Responsive column display on mobile devices can be optimized by configuring columns to appear in a 2x3 or 1x6 layout. This can be achieved even with

What is the best way to apply a class to the grandparent div of an element in AngularJS?

Tips for navigating a list of areas in JavaScript

Retrieving properties of objects using HTML Select

Unexpected Display Issue with Angular Select Option

What is the best way to intelligently cache specific segments of a page in PHP?

Steps for eliminating the overlay on top of the padding region

Show two spans, each underneath the other

Save the session ID in localStorage instead of a cookie

The div inside an iframe is not displaying the desired background color as intended from the parent page

How can we activate navigation on a mobile browser?

What is the best way to showcase a ul element as inline-block?

Express server does not send any response body

Bone structure template - optimizing list spacing with CSS