Free Consultation: +1 (888) 374 0906

There are some tricks that are so universal, so handy you sometimes forget that they are tricks at all. Over the years they become this plethora of information you store in your back pocket and apply to nearly every website without even thinking about it so that you can expect more consistent, cross-browser results.

One of those said useful tricks is {outline:none;} by applying this as follows:

input:focus, textarea:focus {outline:none;}

You can get rid of that blue feathered outline Safari adds to form input controls.

And Firefox also has a pesky little quirk that involves adding a dotted line around links when you click on them. Adding


will correct this minor annoyance.

On a side note, it’s also worth noting the difference between the border and outline properties. Border affects the item’s dimensions that is adding a border on hover moves the flow of elements (and will break your carefully constructed box model) while the outline doesn’t affect the dimensions at all. Which is the reason Apple and the folks at Mozilla use this property, and not border.
Write A Comment

Post A Comment


Sign up for email updates from our team

View Our Privacy Policy or Terms of Use