CSS removes the link or the dotted line generated by clicking a button

The dotted line generated by the pure CSS Remove button or link click.

This stuff was accidentally discovered, and the number of useful items was also too large, such as the disgusting performance when the border button was clicked under ie, And the click dotted line with the tab removed. However, it is a pity that the style environment is still vulnerable to Internet Explorer in practice.

The focus of this effect is that I accidentally discovered a bug in IE, which may lead to the loss of the dotted line when a button or link is clicked in a specific environment. Other browsers are relatively simple. Browsers supporting CSS2 can solve this problem by setting outline. The FF button tag is specially processed by private attributes, and the DEMO is tested in multiple mainstream browsers.

<Style type = "text/css">. wrap {position: relative ;}. btns {zoom: 1 ;}. btns * {outline: 0; zoom: 1; background: # f2f2f2 ;}. btns button:-moz-focus-inner {border-color: transparent! Important ;} </style> <div class = "wrap"> <div class = "btns"> <button type = "button"> OK </button> <button type = "button"> cancel </button> <a href = "#" title = "bkjia.com"> OK </a> <a href = "#" title = "bkjia.com"> cancel </ a> </div> <br/> <center> If the effect cannot be displayed, press Ctrl + F5 to refresh the page. For more webpage code: <a href = 'HTTP: // www.bkjia.com/'title = "bkjia.com" target = '_ blank'> http://www.bkjia.com/</a> </center>

Tip: the code can be modified before running!