2021-02-08 • – views
Using focus-within to style input groups
Input groups are a pattern that includes an input with a label and/or a button element.
What we want to do is show a focus style around the input-group when the input is focused. To do this lets setup some markup to be used.
html<div class="input-group"><div class="input-group-prepend"><label for="name">Name</label></div><input type="text" /></div>
We wrap the elements in a div with a class of input-group
. We will use this element to provide our focus styles. We also wrap our label in an element with a class of input-group-prepend
which allows us to add a border to the right of the label. We could also have a input-group-append
class which would add a border to the left of the label.
Now that we have our markup structure in place, we can start to apply our styling to the elements.
scss.input-group {// Set elements inline and flush with each otherdisplay: inline-flex;// This is the border will use for focus stylingborder: 1px solid #ddd;input {padding: 1rem;border: 0;font: inherit;// Since we are providing an alternative focus// style, it is safe to remove the focus styling// from the input itself&:focus {outline: none;}}label {padding: 1rem;}}
Now we can now watch for focus within our input group and adjust our border color and apply a box-shadow.
scss.input-group {&:focus-within {border-color: #05f;box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);}}