For the Bootstrap Collapse Component, I have a question regarding the "Accordion example". I wish to remove the underline from the text "Collapsible Group Item" 1-3 when they are in use. They are by default not underlined, and then when moused over, they are underlined. This is modifiable by doing:
btn-link:{
text-decoration: none;
}
However, after clicking and moving the mouse away, the underline persists until something else is clicked. How would I remove the underline there? Check the link to see the behavior I am talking about.
just add mouse hover for btn-link
.btn-link:hover, .btn-link, .btn-link:focus{
text-decoration:none;
}
check the demo here
You need to add two things:
To remove the hover underlining add:
.btn-link:hover{
text-decoration:none;
}
And for the underlining after the click add:
.btn-link:focus{
text-decoration:none;
}
Check out this example.
You need to add two style type for this
.btn-link.focus, .btn-link:focus {
text-decoration: none; //here is if you want to remove
box-shadow: none;
}
and this
.btn-link:hover{
text-decoration:none; //here is if you want to remove
}
the issue seems like because of the pseudo class :focus you can overwrite the CSS of :focus like this.
.btn-link.focus, .btn-link:focus {
text-decoration: none;
}
I hope this solves the issue.
Simple way: just add !important
.btn-link {
text-decoration:none !important;
}
Fiddle
or you can use :focus for click and :hover for hovering,
.btn-link:focus, .btn-link:hover {
text-decoration: none;
}
Related
I found that if there is a a link in the page which does not link to a new page,then when user click it,there will be a dotted line around the element,it will only disappear when user click anything else in the page,how to remove this?
Example:
Note the dotted line around the element Section 2.
Use outline:none to anchor tag class
Like #Lo Juego said, read the article
a, a:active, a:focus {
outline: none;
}
a {
outline: 0;
}
But read this before change it:
removing-the-dotted-outline
Try with !important in css.
a {
outline:none !important;
}
// it is `very important` that there is `no` `outline` for the `anchor` tag. Thanks!
To remove all doted outline, including those in bootstrap themes.
a, a:active, a:focus,
button, button:focus, button:active,
.btn, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus {
outline: none;
outline: 0;
}
input::-moz-focus-inner {
border: 0;
}
Note: You should add link href for bootstrap css before the main css,
so bootstrap doesn't override your style.
Removing outline will harm accessibility of a website.Therefore i just leave that there but make it invisible.
a {
outline: transparent;
}
In my case it was a button, and apparently, with buttons, this is only a problem in Firefox. Solution found here:
button::-moz-focus-inner {
border: 0;
}
Its simple try below code --
a{
outline: medium none !important;
}
If happy cheers!
Good day
The default link color is blue.
How do I remove the default link color of the html hyperlink tag <a>?
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:
a {
color: inherit;
}
<p>The default color of the html element is black. The default colour of the body and of a paragraph is inherited. This
link would normally take on the default link or visited color, but has been styled to inherit the color from the paragraph.</p>
Try something like this:
a {
color: #0060B6;
text-decoration: none;
}
a:hover {
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}
If text-decoration doesn't work, change it to:
text-decoration: none !important;
The !important rule overrides every other styling to the text-decoration attribute. You can read more about it here.
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;
}
.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
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
Simply add this in CSS,
a {
color: inherit;
text-decoration: none;
}
that's it, done.
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.
a:link {
color: red;
}
a:hover {
color: blue;
}
a:active {
color: green;
}
<a href='http://google.com'>Google</a>
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.
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
a:link{color:inherit;}
this is the simple one line can do all stuffs for you <3
I too wanted to remove the default blue link color of a tag.
As I was using bootstrap version 5 I decided to look for the solution in bootstrap documentation.
I searched for "link color" and the result was this link: "https://getbootstrap.com/docs/5.0/helpers/colored-links/"
bootstrap version 5.0 has a class to customise the link colors which I found very helpful and also I was able to change the default blue color of my 'a' tag without any fuss.
Hope this is helpful.
Here are two methods to remove the default link color:
Method 1: Using inline CSS
Link Text
Method 2: Using a CSS stylesheet
a {
color: black;
}
<style>
a {
color: ;
}
</style>
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.
This will work
a:hover, a:focus, a:active {
outline: none;
}
What this does is removes the outline for all the three pseudo-classes.
I have the following HTML:
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
In CSS, I want to set the a:hover for these menu items to a particular color. So I write:
.menu a:hover
{
color:#DDD;
}
But, I want to set this a:hover color only for those <a> tags with the class main-nav-item and not the main-nav-item-current, because it has a different color and shouldn't change on hover. All <a> tags within the menu div should change color on hover except the one with the current class.
How can I do it using CSS?
I tried something like
.menu a:hover .main-nav-item
{
color:#DDD;
}
thinking that only ones with main-nav-item class will change color on hover, and not the current one. But it is not working.
Try this:
.menu a.main-nav-item:hover { }
In order to understand how this works it is important to read this the way the browser does. The a defines the element, the .main-nav-item qualifies the element to only those which have that class, and finally the psuedo-class :hover is applied to the qualified expression that comes before.
Basically it boils down to this:
Apply this hover rule to all anchor elements with the class main-nav-item that are a descendant child of any element with the class menu.
Cascading is biting you. Try this:
.menu > .main-nav-item:hover
{
color:#DDD;
}
This code says to grab all the links that have a class of main-nav-item AND are children of the class menu, and apply the color #DDD when they are hovered.
Set a:hover based on class you can simply try:
a.main-nav-item:hover { }
how about
.main-nav-item:hover
this keeps the specificity low
try this
.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}
.div a:hover
{
background-color:#080808;
color:white;
}
lets say we have a anchor tag used in our code and class"div" is called in the main program. the a:hover will do the thing, it will give a vampire black color to the background and white color to the text when the mouse is moved over it that's what hover means.
I found if you add a !important, it works when previously it didn't.
a.main-nav-item:link {
color: blue !important;
}
a.main-nav-item:visited {
color: red !important;
}
a.main-nav-item:hover {
color: purple !important;
}
a.main-nav-item:focus {
color: green !important;
}
a.main-nav-item:active {
color: green !important;
}
Also, I've read somewhere that the order is important. The mnemonic "LoVe HaTe" helps you remember it: link -> visited -> hover -> active
One common error is leaving a space before the class names. Even if this was the correct syntax:
.menu a:hover .main-nav-item
it never would have worked.
Therefore, you would not write
.menu a .main-nav-item:hover
it would be
.menu a.main-nav-item:hover
How to get a link not underlined in HTML?
It can be done in following ways:
1) If you want to remove underline from specific link, then use
Some text
2) To remove the underline from entire html page, Create a .css file, In that write following:
a { text-decoration: none; }
It will suppress underline from every anchor tag.
Just guessing at what your next question would be....
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
As everyone above said, but I wouldn't use inline styles.
Rather set a class for all links that you do not wish to have underlined.
Your link
CSS:
a.nolines{text-decoration:none;}
You'll probably want to do that in CSS.
a {
text-decoration: none;
}
Or, as an inline style:
link
for one link, use style="text-decoration:none"
if you want it for the whole site:
<style> a { text-decoration:none; } </style>
Using CSS. The property you need to set is text-decoration: none;
How can I make a link in HTML turn a color when hovering and remove the underline using CSS?
You want to look at the :hover pseudoselector, the color property, and the text-decoration property.
a:hover { color: red; text-decoration: none; }
To assure your hyperlink is styled as you want (and does not conflict with other style rules), use !important:
a:hover { color: red !important; text-decoration: none !important; }
Also in addition to stragers answer, make sure to declare the pseudo classes in the LoVe HAte way. You have to declare :link first, then :visited, then :hover and then :active. Otherwise some browsers may not apply the pseudo classes.
a:link{
/*this only apllies to named anchors*/
}
a:visited{
/*possible styles for visited links*/
}
a:hover{
/*when mouse hovers over a-tag*/
text-decoration:none;
color:red;
}
a:active{
/*possible styles on active (when a-tag is clicked)*/
}