how can i change the color of a placeholder of an html5 input area using css

Question

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

score 3 · Answer 1 · answered Feb 10 '23 at 20:53

3

input::placeholder

input::placeholder {
  color: red;
}

<h1 id="Start"> webui </h1>
<input type="text" id="search" placeholder="Search" />

answered Feb 10 '23 at 20:53

Kameron

10,240
4
13
26

score 1 · Accepted Answer · edited Feb 11 '23 at 02:16

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

edited Feb 11 '23 at 02:16

blurfus

13,485
8
55
61

answered Feb 10 '23 at 20:53

katakrowa

162
6

This is invalid. `id`'s are case sensitive. Should be `#search::placeholder` – Kameron Feb 10 '23 at 20:58

how can i change the color of a placeholder of an html5 input area using css

2 Answers2