Question 207401 in Html Question posted in
Some basic documentation can be found here.

HTML/CSS textbox text color

Using the VS Code Live Server extension and Chrome. For some reason I can change all other properties of the textbox, but not the text color– why?

textbox.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Search Google</title>
        <link rel="stylesheet" href="textbox.css">
    </head>
    <body>
        <input id="search-box" type="text" placeholder="Search Google or type a URL">
    </body>
</html>

textbox.css:

#search-box {
    font-family: Arial;
    font-size: 16px;
    background-color: red;
    color: blue;
}
Tags:

2

Answers


  1. 0

    The color property only styles the text a user types into the form field. To color the placeholder text, you need to use the ::placeholder pseudo-element:

    #search-box {
  font-family: Arial;
  font-size: 16px;
  background-color: red;
  color: blue;
}

::placeholder {
  color: blue;
}
    <input id="search-box" type="text" placeholder="Search Google or type a URL">
    Login or Signup to reply.
  2. 0

    You can only change the input text colors, but you can’t change the placeholder text colors. If you want to set the placeholder text colors, you can do the following:

    #search-box::placeholder {
     color: blue;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search