More accurate input focus ring

[developit]

I'd like to suggest a more accurate (at least in terms of OS X) input focus outline/border including the nice little animation Apple added in Yosemite.

Preview:

JSFiddle Demo:

http://jsfiddle.net/developit/2xpnn03s/

SCSS:

.form-control {
    box-shadow: 0 0 0 7px rgba(109,179,253,0);

    &:focus {
        box-shadow: 0 0 0 1px rgba(109,179,253,0.8);
        transition: box-shadow 250ms ease-out;
        cursor: text;
    }
}

... thoughts?

[goodseller]

That looks great! 👍

[connors]

@developit Rad. This is cool but we'll need to add a separate class instead of using the base .form-control. Only since .form-control is used for more things that text inputs.

[developit]

Sounds like a plan, because as far as I can tell OS X only seems to use the zoom animation for some fields anyway, so perhaps the best approach is just an optional modified class that can be added to (textual) inputs. If you have a className in mind, I can do a PR.

[luizbills]

+1

[KhanMaytok]

+1