Is there a set of styles that you can set to remove all anchor styles?
The most I can do is remove the text decoration but I don't want to define a color because each text field could be a different color:
#text {
color: green;
}
a {
text-decoration: none;
color: none;
}
<a href="" id="text">
Text
</a>
UPDATE:
There was a typo in my code. So the link was not connected to the style rule.
a { color: inherit; }
… will cause the element to take on the colour of its parent (which is what I think you are looking for).
explanation of inherit property
a {
text-decoration: none;
color: unset;
}
/* Global values */
color: inherit;
color: initial;
color: unset;
https://developer.mozilla.org/fr/docs/Web/CSS/color
use unset instead of none
Related
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;
}
How can I make the decoration text in the <p> tag not to be overwritten by the <a> tag?
a {
text-decoration: none !important
}
#paragraph {
color: black;
}
<p id="paragraph">this is a link</p>
My problem is that I want the text color p is black, not blue.
I found this one but no useful
How to remove the underline for anchors(links)?
Please guys explain this. All helps are appreciated.
The best way is to use inherit, so it will depend on the parents property.
a { color: inherit; text-decoration: inherit }
In the <style> tag, change a with p > a
p > a {
color: black;
text-decoration: none;
}
Working demo: https://codepen.io/FedeMITIC/pen/GyXQax
CSS reference about selectors: https://www.w3schools.com/cssref/css_selectors.asp
a { text-decoration: none !important; color: #000;}
This will remove your colour as well as the underline that anchor tag exists with
a
{
text-decoration: none ;
}
a:hover
{
color:white;
text-decoration:none;
cursor:pointer;
}
<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 page at http://www.problemio.com/problems/problem.php,
and you see on the bottom-right I have a teal image. It is really a link and in that link I can't seem to get the text color to appear white.
Here is my CSS:
.button
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
a:button.visited
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
and here is how I make the link with HTML:
<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>
Any idea what is going wrong and why the color of the link isn't white?
It appears that you're trying to override the styling of the a:link class Try:
Option 1:
Here is the class you're trying to override:
a:link {
color: #3686A7;
text-decoration: none;
}
You need to add !important to the end of your style declaration:
.button {
color: white !important;
}
Option 2:
You could further define the a:link class rules:
a:link.button {
color: white;
}
That's because a:link (line 95) is more specific than .button (line 109).
You can fix it by changing the rule to
.button,
a:link.button {
/* rules */
}
Tips:
While using !important will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse - http://www.w3.org/TR/CSS2/cascade.html#important-rules
Use Firebug for Firefox, or Chrome's inspect element, to check the css affecting a given element.
In your .button class, use this: color: white !important;. The problem happens because the a style declaration is applied after the .button declaration, in effect cancelling the color you have set in favor of the link 's color property. Using !important ensures the color rule is applied over any other.
That's because you have another class in common_elements.css that has higher priority than .button
a:link
{
color: #3686A7;
text-decoration: none;
}
Try making your .button more prioritized by !important
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>
);