UI Pencil - How to check form validity from pure CSS
Change the value inside input box to see the effect
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(122,189,190,1) 49%, rgba(253,187,45,1) 100%);
background-size: cover;
height: 100vh;
overflow: hidden;
}
.main{
margin-top: 10%;
margin-left: auto;
margin-right: auto;
}
.wrapper{
padding: 30px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0px -1px 20px 0px rgba(0,0,0,0.2);
border-radius: 16px;
overflow: hidden;
margin: auto;
width: 50%;
min-width: 500px;
display: flex;
flex-direction: column;
}
.title{
text-align: center;
}
.note{
text-align: center;
font-style: italic;
font-size: 20px;
}
.item:not(:last-child){
width: 100%;
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.input_holder{
position: relative;
width: 100%;
min-width: 300px;
}
/*input box*/
input{
width: 100%;
max-width: 100%;
font-size: 18px;
height: 30px;
}
/*when the input value is valid*/
input:valid{
border: 2px solid green;
background: rgb(209, 252, 209);
}
/*when the input value is invalid*/
input:invalid{
border: 2px solid red;
background: lightgoldenrodyellow;
}
/*when the input box is focus*/
input:focus{
border: 2px solid rgb(0, 117, 128);
background: white;
}
.status{
display: block;
font-size: 18px;
padding-bottom: 10px;
}
input:valid ~ .status {
position: absolute;
top: 0;
left: 95%;
height: 37px;
line-height: 37px;
}
.input_holder input:valid ~ .status::after {
content: "\2713";
color: green;
}
.input_holder input:invalid ~ .status::after {
content: "value is invalid";
color: red;
}
.input_holder input:required ~ sup::after {
content: "**this field is mandatory";
color: #121212;
font-size: 13px;
}
</style>
</head>
<body>
<div class="main">
<div class="title"><h5>UI Pencil - How to check form validity from pure CSS</h5></div>
<div class="wrapper">
<div class="item">
<label>First name: </label>
<div class="input_holder">
<input type="text" required value="Tony" placeholder="your first name" />
<sup></sup>
<div class="status"></div>
</div>
</div>
<div class="item">
<label>Age: </label>
<div class="input_holder">
<input type="number" required min="18" max="200" placeholder="you must be older than 18 years old" /><sup></sup>
<div class="status"></div>
</div>
</div>
<div class="item">
<label>Email Address: </label>
<div class="input_holder">
<input type="email" required placeholder="your email address" value="abc@gmail.com"/><sup></sup>
<div class="status"></div>
</div>
</div>
</div>
<div class="note">Change the value inside input box to see the effect</div>
<div class="note">full tutorial, visit: <a href="https://uipencil.com/how-to-check-form-validity-from-pure-css-in-range-out-of-range-user-invalid">https://uipencil.com/how-to-check-form-validity-from-pure-css-in-range-out-of-range-user-invalid</a></div>
</div>
</body>
</html>