How Do I Change Placeholder Color in an input textbox?

I have code like this but I can not change the placeholder color of my login forms’ placeholder textbox I’ve tried color: white; the normal CSS to change the color of text but it is still the default grey color.

MY CSS

body {
background: black;
color: white;
}

.textbox {
	padding: 40px 90px;
	background: blue;
	font-weight: bold;
	text-align: center;
	border-radius: 5px;
	border: none;
    position: absolute;
    left: 15%;
color: white;
}


.textbox1 {
    padding: 40px 90px;
	background: blue;
	font-weight: bold;
	text-align: center;
	border-radius: 5px;
	border: none;
	position: absolute;
    left: 15%;
color: white;
}

.submit {
	border: none;
	border-radius: 10px;
	padding: 25px 35px;
	background-color: yellow;
    cursor: pointer;
	position: absolute;
    left: 30%;
	bottom: 20%;
}

.container {
position: absolute;
left: 25%;
background: rgb(0,255,217);
background: linear-gradient(90deg, rgba(0,255,217,1) 26%, rgba(26,255,0,1) 52%, rgba(241,255,0,1) 76%);
width: 30%;
height: 80%;
border-radius: 15px;
}

.submit:hover {
	transition: 1s;
	background-color: white;
}

.textbox:hover {
   transition: 0.2s;
   background: white;
}

.textbox1:hover {
	transition: 0.2s;
	background-color: white;
}

my HTML

<!DOCTYPE html>
<html>
<head>
<title>Basic Login/signup form</title>
<link rel="stylesheet" href="file:///C:/Users/hp/OneDrive/Documents/Coding/Login.css" />
</head>
<body>
<h1>Basic HTML CSS login/ sign-up form (does not sign in or login users)</h1>
<div class="container">
<h1>Login</h1>
<input placeholder="Userneame" class="textbox" required/>
<br><br><br><br><br><br><br><br><br><br><br><br>
<input placeholder="Password" class="textbox1" required/>
<br><br><br><br>
<button class="submit">Submit</button>
</div>
<body>
</html>

but it is still grey

Slightly off-topic: You shouldn’t be using placeholders as prompts, that’s what labels are for. For one thing, it is not accessible; for another, if a user has autofill, they have no idea what they are meant to enter in those fields.

And a whole load of <br>s is a no-no, too. That what CSS is for, to space things out as required.

5 Likes

Use the ::placeholder pseudo element.

https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

3 Likes