0

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

blurfus
  • 13,485
  • 8
  • 55
  • 61
A-1500
  • 27
  • 4

2 Answers2

3

input::placeholder

input::placeholder {
  color: red;
}
<h1 id="Start"> webui </h1>
<input type="text" id="search" placeholder="Search" />
Kameron
  • 10,240
  • 4
  • 13
  • 26
1

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;
}
blurfus
  • 13,485
  • 8
  • 55
  • 61
katakrowa
  • 162
  • 6