I use the <abbr> tag to show the full content of some trimmed words with the CSS property text-overflow: ellipsis .
When using <abbr> these words get a dotted underline and on hover cursor changes to one with a question mark.
I did manage to change it using this. But, I'm not sure this is the best way, is there anything wrong with this approach?
abbr[title] {
border-bottom: none !important;
cursor: default !important;
}
Starting with v40 Firefox switched to using text-decoration to provide the underline and chromium will be doing it that way too. So you should update your code to include that if you need to support those browsers:
abbr[title] {
border-bottom: none !important;
cursor: inherit !important;
text-decoration: none !important;
}
It sets a border and text-decoration. Remove that with:
border: none;
text-decoration: none;
Example: jsfiddle
This should work:
abbr[title] {
text-decoration: none;
}
This uses styling abbreviations.
abbr[title] {cursor: default !important;}
Remove that with abbr[title] {text-decoration: none !important;}
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;
}
I would like to remove the blue outline it gives me when my radio is clicked/focused.
I tried using outline: none and border: none, but nothing seems to be working.
Does anyone have a solution for this?
Screenshot of what I’m talking about:
Remove the outline when the input element has the focus.
input:focus{
outline:none;
}
As a side note, this is only for Google Chrome, other browsers use different techniques for showing an input element has the focus.
UPDATE:
Having worked a lot with accessibility lately, I've come to understand that removing the outline from inputs is not a very good thing. It prevents people using keyboard navigation to see what's focused.
ORG POST:
You might have to be more specific with your selector. When using bootstrap you have to override it (in my version, 3.3.6 at least) by selecting input[type="radio"]:focus, not just input:focus, like this:
input[type="radio"]:focus {
outline: none;
}
Maybe a separate issue, but I had to set box-shadow to none as well.
input[type="checkbox"] {
outline: none;
box-shadow: none;
}
I know this is old, but hope that it helps somebody!
input[type='radio']:focus {
outline: none !important;
box-shadow: none !important;
}
/*For Bootstrap*/
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: none !important;
}
Try This
input[type="radio"]:focus {
outline: none;
box-shadow: none;
}
Try this:
input[type=radio] {
outline-color: transparent;
}
Hope it helps!
I've tried everything I can think of to remove this. How can I remove this crazy firefox on focus border? It will highlight with an orange border when I click on the input area.
Here is my CSS
.noFocus:focus {
outline: none !important;
border: none !important;
-moz-appearance:none;
}
and
textarea:focus, input:focus{
outline: none;
border: none !important;
-moz-appearance:none;
}
This works for the issue you have-
input, select, textarea, button {
-moz-box-shadow:none;
}
Leave a whitespace between !important and the ; , like this:
outline: none !important ;
That could be the cause.
Try this hope this works:
input:invalid {outline: none;
border: none !important;
-moz-appearance:none;}
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
Okay, I'm trying to get rid of all these little things browsers do to input fields (like focus borders and what not).
input[type="text"] {
font:bold 10px/12px verdana,arial,serif;
padding: 20px;
border-radius: 15px;
}
input[type="text"]:focus {
outline: none!important;
}
The code above does not work. I also tried editing the input via the 2.1 way (
input.text { /*stuffhere*/};
input.text:focus{ outline: none; }
). It didn't work. Anybody have any ideas?
I'm at a loss; you seem to be doing it correctly. Border for the normally-visible border, and outline for the focusy thing.
Have a look at this fiddle and see if it's working as expected. If it does (as it does for me), it could be conflicting CSS in your case. !important is a dangerous and powerful tool, but it's still no guarantee.
http://jsfiddle.net/LQppm/1/
input[type="text"] {border: none}
input[type="text"]:focus {outline: none}
maybe outline: 0!important; will work?