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

Improve this question
0

2 Answers 2

Reset to default
3

input::placeholder

input::placeholder { color: red; }
<h1 id="Start"> webui </h1> <input type="text" id="search" placeholder="Search" />

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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; }
Improve this answer

1 Comment

This is invalid. id's are case sensitive. Should be #search::placeholder

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.