HTML
<form class="myForm">
<div class="form-wrapper">
<label for="withoutjs">Your Text</label>
<input type="text" name="withoutjs" required placeholder="Your text here" pattern="withoutJS">
<span class="validation"></span>
</div>
<div class="form-wrapper">
<label for="mail">Your Email</label>
<input type="email" name="mail" required placeholder="Your email here">
<span class="validation"></span>
</div>
</form>
CSS
.myForm {
width: 300px;
margin: 2em auto 0;
text-align: right;
}
.form-wrapper {
margin-bottom: 2em;
}
.validation {
position: relative;
}
.validation:before {
position: absolute;
right: 5px;
top: -8px;
font-size: 1.85em;
}
label {
margin-right: 1em;
}
input {
border-radius: 3px;
height: 44px;
border: 1px solid #c5c5c5;
padding: 10px;
line-height: 1.333;
font-size: 16px;
outline: 0;
}
input:required:invalid + .validation:before,
input:focus:invalid + .validation:before{
content: '\2717';
color: red;
}
input:required:valid + .validation:before{
content: '\2713';
color: green;
}
input:required:valid,
input:focus:valid{
border: 1px solid green;
}
