In websites that need to enter information, the user can be helped by giving color tips. In this post, I have a form in which the user must enter a password. As long as the user enters less than six characters, the password of this password is red, and after entering six characters, this border becomes green.

<!-- This script got from -->
<h3>Enter your password</h3>
    <div class="form__field">
        <input type="password" class="form__input" pattern=".{6,}" required>
        <span class="icon"></span>
<p>Password must be six or more characters</p><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="">Developers Answer</a></div>

.align {
	display: grid;
	place-items: center;
.icon {
	font-size: 2rem;
body {
	color: #888;
	font-family: sans-serif;
	line-height: 1.5;
	margin: 0;
	min-height: 100vh;
h3 {
	font-size: 1.5rem;
	margin-top: 1.5em;
	color: #111;
	margin-bottom: 1.5em;
p {
	margin-bottom: 1.5em;
	margin-top: 1.5em;
input {
	font: inherit;
	outline: 0;
.form__field {
	position: relative;
.form__field .icon {
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%)
.form__input {
	border-radius: 0.25em;
	border-style: solid;
	border-width: 2px;
	font-size: 1.5rem;
	padding: 0.5em 4em 0.5em 2em;
.form__input:valid {
	border-color: forestgreen;
.form__input:valid+.icon::after {
	content: '😃';
.form__input:invalid {
	border-color: firebrick;
.form__input:invalid+.icon::after {
	content: '😳';