CSS remove buttons and dotted boxes in links

ArticleDirectory

• How to remove dashed lines

How to remove dashed lines

For how to remove the dotted box, many people recommend this:

 
1A: focus, input [type = button], input [type =Submit] {2 Outline: none;3}
 

From this sectionCodeLet's take a look at the following two points:

1. Incomplete removal

   IE6/7 is not supportedOutlineProperties in FirefoxInputThe dotted line is not removed.

2. Too much Removal

   The buttons (Firefox not removed) and links of all browsers except IE6/7 are removed from the dotted box.

These are two seemingly conflicting issues. Actually, it is not because of the two problems of the same nature. Technically, this method is not comprehensive. In terms of experience, I think you also know that we just remove some unnecessary ones and it is unfriendly to remove them all. Therefore, the above statement is not recommended by individuals.

 

Can I remove the dotted box when using the tab key? Why is myInputDoes the dotted box not be removed successfully in Firefox? Many people are troubled when these questions are raised. This is because there are hidden rules. To sum up, let's look at this table:

Remove the valid Browser

Outline: None IE8 | Firefox | WebKit | Opera

Hidefocus IE

: Focus {outline: none;} IE8 | Firefox | WebKit | Opera

: Active {outline: none;} is the same as above, but ie retains the dotted box when tab is used.

:-Moz-focus-inner {outline: none;} There is a bug in Firefox. The input must go to the border in this pseudo State.