HTML/CCS: how to remove the box around link element?

Question

I'm new to HTML and CCS. I would like to have an invisible link but I don't want to set the style of 'a' tags directly, instead I would like to set the style of its parent element so that it becomes invisible.

This is what I tried:

div {
  color: white;
  border: none;
}

a {
  color: inherit;
  border: inherit;
}

a:link {
  text-decoration: none;
}

<html>

<body>
  <div><a href='/trap'> inherit </a></div>
</body>

</html>

It doesn't show the text inside the 'a' tag, but it still shows a box around it, how I can get rid of that box?

I have not understood what you are trying to achieve but in fact the anchor is shown properly, just the color of its text ('inherit') is white and it seems like it's not there. — iiirxs, Sep 04 '18 at 23:05
Possible duplicate of [How can I remove the outline around hyperlinks images?](https://stackoverflow.com/questions/814366/how-can-i-remove-the-outline-around-hyperlinks-images) — colxi, Sep 04 '18 at 23:09

score 2 · Accepted Answer · answered Sep 04 '18 at 23:12

I guess you are talking about the outline box. You can remove it with:

div{
  color: white;
  border: none;
}

a, a:focus{
  color: inherit;
  border: inherit;
  outline:none;
} 
a:link{
  text-decoration: none;
}

<html>
<body>
<div><a href='/trap'> inherit </a></div>    
</body>
</html>

colxi · Answer 2 · 2018-09-04T23:14:06.580

1

You should add this CSS property to hide the outline in all your link elements :

a, a:focus {outline : none;}

In the other hand, if you want to make an element invisible, but still be able to receive click interactions on it, you can play with the opacity CSS property (setting the font color to white is not an elegant solution)

a{ opacity:0; }

edited Sep 04 '18 at 23:14

answered Sep 04 '18 at 23:08

colxi

7,640
2
45
43

score 0 · Answer 3 · answered Sep 04 '18 at 23:08

The 'box' around your link has a default outline property defined. Be sure to include outline: none; to any element or pseudo-selector that includes this treatment.

div {
  color: #ccc; /* for testing purposes*/
  border: none;
}

a {
  color: inherit;
  border: inherit;
}

a:link {
  outline: none; /* removes outline */
  text-decoration: none;
}

<html>

<body>
  <div><a href='#trap'> inherit </a></div>
</body>

</html>

score 0 · Answer 4 · answered Sep 04 '18 at 23:10

0

a:focus {
    outline: none;
}

Is that what you are looking for?

answered Sep 04 '18 at 23:10

luenib

360
3
15

score 0 · Answer 5 · answered Sep 04 '18 at 23:29

I'm a bit confused why you are trying to make a link that is invisible in the first place, but the box you are referring to is most likely the focus box. Typically used to make it easy for the user to know what they are selecting and is good for accessibility-- it's usually not recommended to remove.

You can though by adding the code below.

a:focus {
  outline: none;
}

HTML/CCS: how to remove the box around link element?

5 Answers5