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

HTML & CSS
1

Hi there!

I would like to visually signify that a text input form element has been updated when a page loads and then have it fade out, so it returns to a standard white background. Is such a thing even possible? I know I’ve seen something like this in phone apps, but I don’t know if I’ve ever noticed such a thing in a traditional html form.

Thanks for your time!

2

Have you noticed here, when you first view a topic, the post starts blue and fades to white?
I can’t find it in inspect because there are so many nested divs, and then it may be done via js anyway for all I know.
But I’m sure it can be done with css animation.

2 Likes
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
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.