How to remove css dotted line style

藏色散人
Release: 2019-01-14 11:06:55
Original
7057 people have browsed it

When a hyperlink becomes active or receives focus, a dotted line appears around the link to distinguish it from other links. This is the default behavior of hyperlinks. It's basically a dashed outline that doesn't affect surrounding elements like a border. If we want to remove the css dotted line style, we can use the CSS property "outline:none;" to achieve this.

How to remove css dotted line style

Let’s take a simple example to introduce how to remove the css dotted line style.

The code example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>使用CSS删除虚线轮廓</title>
    <style type="text/css">
        a, a:active, a:focus{
            outline: none; /* *适用于Firefox,Chrome,IE8及以上版本* */
 }
    </style>
</head>
<body>
<div class="menu">
    <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a>
</div>
</body>
</html>
Copy after login

outline (outline) is a line drawn around the element, located outside the edge of the border, which can highlight the element. The outline attribute sets the outline around the element.

Note: Always declare the outline-style attribute before the outline-color attribute. The color of an element's outline can only be changed after it has obtained its outline.

Note: Contour lines do not occupy space and are not necessarily rectangular.


The default value is none.


This article is an introduction on how to remove the css dotted line style. It is very simple and easy to understand. I hope it will be helpful to novices!

The above is the detailed content of How to remove css dotted line style. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template