<form>
<fieldset>
<legend>Your Name</legend>
<div>
<label for="first">First Name</label>
<input type="text" id="first" placeholder="Jane">
</div>
<div>
<label for="last">Last Name</label>
<input type="text" id="last" placeholder="Smith">
</div>
</fieldset>
</form>
body {
padding: 3rem;
}
legend {
font-size: 1.15rem;
font-weight: 700;
padding: 1rem;
}
div {
margin-bottom: 1rem;
}
input {
border: 1px solid #000;
height: 20px;
padding: 3px 5px;
}
input::placeholder {
color: rgba(0, 0, 0, 0.5);
}
input:empty {
background: tomato;
border-color: #b71c1c;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.