<fieldset>
<legend>Contact information</legend>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-456-7890"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required />
<span class="validity"></span>
</fieldset>
legend {
background-color: #000;
color: #fff;
padding: 3px 6px;
}
.output {
font: 1rem 'Fira Sans', sans-serif;
}
input {
margin: 1rem 0;
width: 60%;
}
label {
display: inline-block;
font-size: .8rem;
width: 20%;
}
input:invalid + span:after {
content: '✖';
color: #f00;
padding-left: 5px;
}
input:valid + span:after {
content: '✓';
color: #26b72b;
padding-left: 5px;
}