<div class="form-group">
<label for="abcdef">Example form field</label>
<input type="text" id="abcdef">
</div>
.form-group {
padding: 2rem;
}
.form-group:focus-within {
outline: 2px dashed blue;
}
.form-group:focus-within label {
color: blue;
}
body {
min-height: 100vh;
display: grid;
place-content: center;
}
label {
font-size: 1.25rem;
font-weight: bold;
}
input {
font-size: min(16px, 1rem);
padding: 0.25em 0.5em;
}
.form-group {
display: grid;
grid-gap: 0.5em;
}
button {
width: fit-content;
background-color: blue;
margin-top: 2rem;
border: none;
color: #fff;
padding: 0.5em 0.75em;
border-radius: 0.15em;
font-size: 1.15rem;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.