Home >Web Front-end >CSS Tutorial >How to remove the ugly expanded dotted line when clicking on a hyperlink in Firefox_Experience exchange

How to remove the ugly expanded dotted line when clicking on a hyperlink in Firefox_Experience exchange

WBOY
WBOYOriginal
2016-05-16 12:04:001332browse

In some special cases, such as when making a navigation menu, the effect will be very bad when this happens, because Firefox will mistakenly expand the border of the link:
Enter about:config in the Firefox address bar and return car. There is a configuration item called "browser.display.focus_ring_width". If you change it to 0, the border will not appear when you click on the link. But in this case, there is no border indicator when the focus is on the button. And as a developer, setting this attribute in the browser is tantamount to deceiving others.
This is actually the outline attribute that Firefox adds to the tag when it is in focus (pseudo selector - a:focus).
The correct solution is to add a rule in CSS:
a {
outline: none;
}
Or narrow the scope:
a:focus {
outline: none ;
}
The latter causes the left mouse button to be pressed on the link and the dotted outline will still be displayed during the period before releasing.
In most websites I have seen, Write this rule in CSS. Maybe Firefox should consider removing this default outline.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn