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.
HTML
<!-- This script got from www.devanswer.com -->
<h3>Enter your password</h3>
<form>
<div class="form__field">
<input type="password" class="form__input" pattern=".{6,}" required>
<span class="icon"></span>
</div>
</form>
<p>Password must be six or more characters</p><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
.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: '😳';
}
