Expanding Input Outlines

Animate the expanding and contracting of an input's outline to show an active state using :focus and transitions.

by Travis Almand

HTML

<p>This input's outline is expanded using outline-offset in a transition on :focus. Both outline and outline-offset properties are transitioned. If the outline property is not transitioned then it pops out of existence on the input's blur.</p>
<label id='one'><input placeholder='text' type='text' /></label>

CSS

#one {
    background: gainsboro;
    display: inline-block;
    margin: 20px;
    padding: 30px;
}
#one input {
    border-style: none;
    font-size: 20px;
    outline: 0px solid blue;
    outline-offset: 0;
    transition: outline 0.25s, outline-offset 0.25s;
}
#one input:focus {
    outline: 2px solid blue;
    outline-offset: 28px;
}