CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 2004

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

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?

Upvotes: 0

Views: 2963

Answers (5)

user9367637
user9367637

Reputation: 21

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;
}

Upvotes: 0

colxi
colxi

Reputation: 8720

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; }

Upvotes: 1

Hichem Benali
Hichem Benali

Reputation: 411

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>

Upvotes: 2

luenib
luenib

Reputation: 355

a:focus {
    outline: none;
}

Is that what you are looking for?

Upvotes: 0

doppler
doppler

Reputation: 883

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>

Upvotes: 0

Related Questions