skip to Main Content

I’m trying to change the colour of a input area placeholder in html5 using a separate CSS stylesheet but it’s not working

#Search {
  margin: auto;
  display: block;
  background-color: royalblue;
  color: white;
  border-radius: 2500px;
  border: 3px solid white;
  padding: 20px;
  font-size: 30px;
  font-weight: 300;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   ::placeholder {
    color: white;
<div>
  <h1 id="Start"> webui </h1>
</div>
<br>
<input type="text" id="search" placeholder="Search" />

I tried the codes but it didn’t work I also tried a web kit but I’m not sure if I did it write and I’m a beginner

2

Answers


  1. input::placeholder

    input::placeholder {
      color: red;
    }
    <h1 id="Start"> webui </h1>
    <input type="text" id="search" placeholder="Search" />
    Login or Signup to reply.
  2. There is a pseudoclass that does this…. but you have to use it separately.

    #search {
        margin: auto;
        display: block;
        background-color: royalblue;
        color: white;
        border-radius: 2500px;
        border: 3px solid white;
        padding: 20px;
        font-size: 30px;
        font-weight: 300;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    
    #search::placeholder {
        color: red;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search