How to remove the dotted outline when you click on button or anchor tag


It is quite common fact that due to paddings, we tend to blow the control to larger sizes. Say a menu item, which is a simple anchor tag, inside an ordered list; you will blow the anchor to such a level that on click of it, there appears an outline with dotted line, which looks awkward.

The fix for this:

a { outline:none; }

Bear in mind that this styling literally uses the “outline” CSS property. Outline is very similar to the “border” property, with two important differences:

  • Outline goes around the entire object (much like using just “border”), but you may not be specific about sides. “Outline-left” does not exist.
  • Outline value is not a part of the box model. Border is calculated into the total width of the box, whereas outline is not. This is important so that layouts don’t get bumped around when the outline is applied and removed.

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s