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 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>
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; }
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>
a:focus {
outline: none;
}
Is that what you are looking for?
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;
}
Related
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
I have a simple div in an anchor tag and I am trying to remove the blue underline from the link.
.removelinkdefault {
color: black;
text-decoration: none !important;
}
<div class="removelinkdefault">Reilly Lawless</div>
All documentation I have seen says to use text-decoration: none; however it does not appear to be working:
What am I doing wrong and how do I fix it?
Try adding the class="removelinkdefault" to the link (a) instead of the div
.removelinkdefault {
color: black;
text-decoration: none;
}
<div>Reilly Lawless</div>
Also, now you don't need !important
Remove the underline from the anchor element rather than the div:
a {
text-decoration: none;
}
Links are the <a> tag, not the <div>
a {
color: black;
text-decoration: none !important;
}
<div class="removelinkdefault">Reilly Lawless</div>
I'm trying to figure out if there's a way to allow for prevent the styling of the ":focus" pseudo-class from being applying when there is a ":focus:active" or click event without the use of jQuery/JS. As the ":active" state is dependent on the ":focus" state, I would presume that ":focus:not(:active)" work, but it does not. Is there any way to combine ":not" with ":focus" to prevent "focus:active" from triggering "focus"?
:not(:focus) is the closest you can get in CSS
You can juste use :focus-visible this selector only triggers on focus not on active.
Well... a:focus:not(:active) works.
A thing that is important and a bit of a gotya, is the order of rules.
Always place the active as last so it overrules the hover.
It might be you want it on a none focus element like div.
Then you would need to add a tabindex for the browser to be able to set focus on the div.
And a thing to notice is that you need to assign the rules to a class or a type. A simple :hover { will not work on the div.
<html>
<head>
<style>
* {
outline: none;
}
a {
text-decoration: none;
display: inline-block;
padding: 3px 8px;
}
div {
display: inline-block;
}
.magic:focus:not(:active) {
text-decoration: underline;
border: 1px solid black;
padding: 2px 7px;
}
.magic:hover {
text-decoration: underline;
color: green;
}
.magic:active {
text-decoration: line-through;
color: red;
}
</style>
</head>
<body>
<a tabindex="1" class="magic" href="#"> hello </a>
<div tabindex="2" class="magic" > world </div>
</body>
</html>
Something can not get focused until it is active. So :focus:not(:active) is impossible. It can never be triggered.
I have some html anchor link code, and unlike the rest of document I want it to look like it is not a link.
Is there a simple way to disable the style change caused by wrapping text in a anchor tag without having to brute force it to be the same (ie, if I change the body font style I don't have to also change some other :link stuff).
Setting color to black and text-decoration to explicitly none is a little more aggressive than worked for me.
I was looking for the CSS of the anchors to be "benign" and just blend into the existing CSS. Here's what I went with:
a.nostyle:link {
text-decoration: inherit;
color: inherit;
cursor: auto;
}
a.nostyle:visited {
text-decoration: inherit;
color: inherit;
cursor: auto;
}
Then I just added the CSS nostyle class to the anchors that I wanted to be unformatted.
I achieved this by creating a class .reset-a and targeting all of its' pseudo classes.
Targeting of all pseudo classes is important to make it flawless.
outline: 0 property removes the dotted border that surrounds a link when it is focused or active.
.reset-a, .reset-a:hover, .reset-a:visited, .reset-a:focus, .reset-a:active {
text-decoration: none;
color: inherit;
outline: 0;
cursor: auto;
}
If you don't care about IE, you can attach :not(#exclude) (where exclude is the ID of the link in question) to your link styles:
a:link:not(#exclude), a:visited:not(#exclude) {
text-decoration: none;
color: blue;
cursor: pointer;
}
Otherwise I don't think you can brute-force it the way you describe. You can either use an inline style instead (not recommended) or you can use a special class/ID assigned to that link, whose selector you'd group with body. For example, if you had these styles:
body {
text-decoration: none;
color: black;
cursor: auto;
}
a:link, a:visited {
text-decoration: none;
color: blue;
cursor: pointer;
}
You can simply toss in a more specific selector, that'd match that link, onto the body rule:
body, #exclude {
text-decoration: none;
color: black;
cursor: auto;
}
a:link, a:visited {
text-decoration: none;
color: blue;
cursor: pointer;
}
Here is a handy snippet if you want to copy-paste the accepted solution into React
const UnstyledLink = ({ href, children }) => (
<a
href={href}
style={{
textDecoration: "inherit",
color: "inherit",
cursor: "auto",
}}
>
{children}
</a>
);
I've got the following.. http://jsfiddle.net/JcLx4/31/ how would I change the properties of the hyperlinked text in this example from blue and underlined to black and not underlined?
At a very basic level, like this:
a:link
{
color: black;
text-decoration: none;
}
To make it specific to links within your custom tag (incorporating display:block to make your link stretch the width of its container):
ab.s a:link
{
color: #000;
display: block;
text-decoration: none;
}
And to change the hover style:
ab.s a:hover
{
background-color: #000;
color: #fff;
}
If you want more information there is a tutorial on this page that explains the different pseudo-classes.
ab.s a{
text-decoration:none;
color: #000;
}