<section id="using-adjacency-selector">
<h2>Using Adjacency Selector</h2>
<div class="input-set">
<input id="favorite-food" />
<label for="favorite-food">Favorite Food</label>
</div>
</section>
<section id="using-javascript">
<h2>Using Javascript</h2>
<div class="input-set">
<label for="favorite-song">Favorite Song</label>
<input id="favorite-song" />
</div>
</section>
<section id="using-focus-within-explicit">
<h2>Using :focus-within (Explicit)</h2>
<div class="input-set">
<label for="favorite-color">Favorite Color</label>
<input id="favorite-color" />
</div>
</section>
<section id="using-focus-within-implicit">
<h2>Using :focus-within (Implicit)</h2>
<label>Favorite Flower
<input id="favorite-flower" />
</label>
</section>
<section id="using-has">
<h2>Using :has</h2>
<label for="favorite-movie">Favorite Movie</label>
<input id="favorite-movie" />
</section>
#using-javascript {
label.focused {
color: red;
}
}
#using-adjacency-selector {
.input-set {
display: flex;
}
input { order: 2; }
label { order: 1; }
input:focus + label {
color: red;
}
}
#using-focus-within-explicit {
.input-set:focus-within label {
color: red;
}
}
#using-focus-within-implicit {
label:focus-within {
color: red;
}
}
#using-has {
label:has(+ input:focus) {
color: red;
}
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
section {
margin-bottom: 2em;
}
h2 {
font-size: 1em;
font-weight: bold;
}
input {
margin: 0 0.5em;
border: 0.125em solid #777;
background: #eee;
}
input:focus {
border-color: #f00;
background: #fff;
}
View Compiled
document.querySelectorAll('#using-javascript input').forEach(input => {
input.addEventListener('focus', () => {
input.labels.forEach(label => {
label.classList.add('focused')
})
})
input.addEventListener('blur', () => {
input.labels.forEach(label => {
label.classList.remove('focused')
})
})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.