Skip to main content

⬅️  Go back

Fill available space on focus with CSS flexbox and transitions

It’s all pretty much in the title on this one. A common interaction for search inputs in user interfaces is to expand the width of the input when the user has placed their focus into it. This example is a dead-simple and flexible way to achieve that effect using only CSS flexbox, transitions, and the :focus-wthin pseudo selector.