Can I have a text box background be colored on page load then fade to white?

HTML & CSS
3

Something like this would do the job.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
	height:100%;
}
.form {
	display:flex;
	height:100%;
	height:100vh;
}
.updated{
	margin:auto;
	position:relative;
}
input{
	width:30$;
	height:30px;
	line-height:30px;
	border:1px solid #ccc;
}
#update {
	background:red;
	animation:fader 5s 3s forwards;
	z-index:-1;
}
@keyframes fader{
	from{background:red;}
	to{background:#fff;}
}
</style>
</head>

<body>
<form class="form" name="form1" method="post" action="">
  <div class="updated">
    <label for="update">Enter Stuff : </label>
    <input type="text" name="update" id="update">
  </div>
</form>
</body>
</html>
1 Like