how can I remove light dashed border of the a tag on focus mode?
when you click a link, it becomes dashed.
I set tabindex:-1 , but it did not make sense.
I want to whether I can remove it?
do you mean something like:
a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}
Related
You can see the blue color on this hyperlink which i have visited. I am trying to remove this but still not able to get idea how to do this.
.myLink:visited,.myLink:hover,.myLink:focus,.myLink:active{
color: inherit;
text-decoration: none;
}
Add this to your css class
outline: none;
border: 0;
Its maybe your outline or box-shadow or border when you hover...you have to check that by inspecting the element in the browser...
Use below css to the link:hover.
.myLink:visited,.myLink:hover,
.myLink:focus,.myLink:active{
color: inherit;
text-decoration: none;
outline: none;
box-shadow: none;
border-color:transparent;
}
To avoid such cases, its always better to add css reset so that there is no need to always override the default browser styles, In your case its the default outline applied by the browser.
Check out this page , it will fix this issue as well as other you might face later.
.myLink:visited{
border:none;
}
After having read all dotted border questions possible, and not having found an answer, I write my question below.
How do i remove the dotted border around the div when i click on a link inside it?
This image shows the word "photography", which has a dotted border when clicked on.
The basics behind this is just a dropdown, that appears when that section is clicked on, which works absolutely fine, i just cannot stand that border, does my nut in.
Any ideas?
That's the focus state. Try to add this:
a:focus {
outline: none;
}
Or if that element isn't a real link, but for example just an li, make that
li:focus {
outline: none;
}
You can use below css property.
a, a:hover, a:active, a:focus {
outline: 0;
}
Please read this article - https://css-tricks.com/removing-the-dotted-outline/ and http://www.outlinenone.com/ for more clarification
Every browser has its own focus indicator like:
Firefox has a dotted line when an element is focused through keyboard tab key.
Chrome has a blue border
Is there any way to set a custom focus indicator for all browsers?
I have tried the following
:focus {
outline: 2px solid #0000ff; }
but its not working.
:focus is a pseudo element and as such it needs to be attached to something else like a link. See my example and click on the link box, it turns red, styled by a:focus attribute. Should work in any browser:
a {
background: #efefef;
padding: 1em;
text-decoration: none;
}
a:focus
{
background: red;
}
Sample link
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
I am using a bit of HTML in my IPhone application. I don't have much idea about HTML.
When we touch any hyperlink(ahref in HTML) there is a blue selection color that appears in "li" which contains ahref. How can we disable it?
You can override the behaviour by specifying your custom color for links via css:
a { color:green; }
Or based on their status eg active, clicked, etc:
a:active { color:green; }
a:visited { color:red; }
a:hover { color:orange; }
I'm not 100% sure, but if the text is truly being selected, and you're seeing a blue color, then the fix would be to apply a style like this:
li::selection {
background-color: transparent;
}
li::-webkit-selection {
background-color: transparent;
}
li::-moz-selection {
background-color: transparent;
}
That's only if it truly is a selection that's occuring. Mind you, only the ::selection and maybe the :-webkit-selection could possibly apply to an iPhone. ::-moz-selection would be for a Firefox browser.