How to remove the default link color of the html hyperlink a tag

Question

The default link color is blue   How to remove the default link color of the html hyperlink tag  lt a gt

User · Answer

I had this challenge when I was working on a Rails 6 application using Bootstrap 4.

My challenge was that I didn't want this styling to override the default link styling in the application.

So I created a CSS file called custom.css or custom.scss.

And then defined a new CSS rule with the following properties:

.remove_link_colour {
  a, a:hover, a:focus, a:active {
      color: inherit;
      text-decoration: none;
  }
}

Then I called this rule wherever I needed to override the default link styling.

<div class="product-card__buttons">
  <button class="btn btn-success remove_link_colour" type="button"><%= link_to 'Edit', edit_product_path(product) %></button>
  <button class="btn btn-danger remove_link_colour" type="button"><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></button>
</div>

This solves the issue of overriding the default link styling and removes the default colour, hover, focus, and active styling in the buttons only in places where I call the CSS rule.

That's all.

I hope this helps

User · Answer

a link color inherit     this is the simple one line can do all stuffs for you  lt 3

User · Answer

You can use System Color  18 2  values  introduced with CSS 2 0  but deprecated in CSS 3   a link  a hover  a active   color  WindowText      That way your anchor links will have the same color as normal document text on this system

User · Answer

If you don t want to see the underline and default color which is provided by the browser  you can keep the following code in the top of your main css file  If you need different color and decoration styling you can easily override the defaults using the below code snippet     a  a hover  a focus  a active         text-decoration  none        color  inherit

User · Answer

You have to use CSS  Here s an example of changing the default link color  when the link is just sitting there  when it s being hovered and when it s an active link    x000D   x000D  a link   x000D    color  red  x000D    x000D   x000D  a hover   x000D    color  blue  x000D    x000D   x000D  a active   x000D    color  green  x000D    x000D   lt a href  http   google com  gt Google lt  a gt  x000D   x000D   x000D

User · Answer

Simply add this in CSS   a       color  inherit      text-decoration  none      that s it  done

User · Answer

you can do some thing like this   a       color   0060B6      text-decoration  none     a hover         color  00A0C6        text-decoration none        cursor pointer        if text-decoration doesn t work then include text-decoration  none  important

User · Answer

This will work      a hover  a focus  a active           outline  none          What this does is removes the outline for all the three pseudo-classes

User · Answer

cancela  cancela link  cancela visited  cancela hover  cancela focus  cancela active      color  inherit      text-decoration  none      I felt it necessary to post the above class definition  many of the answers on SO miss some of the states

User · Answer

The inherit value  a   color  inherit          will cause the element to take on the colour of its parent  which is what I think you are looking for   A live demo follows   x000D   x000D  a     color  inherit    x000D   lt p gt The default color of the html element is black  The default colour of the body and of a paragraph is inherited  This    lt a href  http   example com  gt link lt  a gt  would normally take on the default link or visited color  but has been styled to inherit the color from the paragraph  lt  p gt  x000D   x000D   x000D

User · Answer

lt style gt  a   color            lt  style gt   This code changes the color from the default to what is specified in the style  Using a hover  you can change the color of the text from the default on hover

User · Answer

This is also possible           a               all  unset                 unset  This keyword indicates to change all the properties applying to   the element or the element s parent to their parent value if they are   inheritable or to their initial value if not  unicode-bidi and   direction values are not affected    Source  Mozilla description of all

[html] How to remove the default link color of the html hyperlink 'a' tag?

Examples related to html

Examples related to css

Examples related to anchor

Examples related to html-helper