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;
}
Related
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
Closed 7 years ago.
Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using:
input {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
color: #CCC;
}
This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:
textarea:focus, input:focus{
outline: none;
}
You may want to add some other way for users to know what element has keyboard focus though for usability.
Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:
*:focus {
outline: none;
}
⚠️ Accessibility warning
Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject
The current answer didn't work for me with Bootstrap 3.1.1. Here's what I had to override:
.form-control:focus {
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
}
input:focus {
outline:none;
}
This will do. Orange outline won't show up anymore.
<input style="border:none" >
Worked well for me. Wished to have it fixed in html itself ... :)
I've found the solution.
I used: outline:none; in the CSS and it seems to have worked. Thanks for the help anyway. :)
this remove orange frame in chrome from all and any element no matter what and where is it
*:focus {
outline: none;
}
Solution
*:focus {
outline: 0;
}
PS: Use outline:0 instead of outline:none on focus. It's valid and better practice.
Please use the following syntax to remove the border of text box and remove the highlighted border of browser style.
input {
background-color:transparent;
border: 0px solid;
height:30px;
width:260px;
}
input:focus {
outline:none;
}
Set
input:focus{
outline: 0 none;
}
"!important" is just in case. That's not necessary. [And now it's gone. –Ed.]
This will definitely work. Orange outline will not show anymore..
Common for all tags:
*:focus {
outline: none;
}
Specific to some tag, ex: input tag
input:focus {
outline:none;
}
I found out that you can also use:
input:focus{
border: transparent;
}
When I click somewhere else the border disappears, I tried to use onfocus: none, but that didn't help. How to make this ugly button border disappear when I click on it?
input[type=button] {
width: 120px;
height: 60px;
margin-left: 35px;
display: block;
background-color: gray;
color: white;
border: none;
}
<input type="button" value="Example Button">
Using outline: none; you can remove that border in chrome.
<style>
input[type=button] {
width: 120px;
height: 60px;
margin-left: 35px;
display: block;
background-color: gray;
color: white;
border: none;
outline: none;
}
</style>
Focus outline in Chrome and FF:
removed button focus outline:
button,
input[type=button] {
outline: none;
}
button::-moz-focus-inner,
input[type=button]::-moz-focus-inner {
border: 0;
}
/*
Accessibility (A11Y)
Don't forget! User accessibility is important
*/
button:focus,
input[type=button]:focus {
/* your custom focused styles here */
}
It works for me simply :)
*:focus {
outline: 0 !important;
}
This one worked for me
button:focus {
border: none;
outline: none;
}
Set both the outline and the box-shadow properties of the button to none and make them important.
input[type=button] {
outline: none !important;
box-shadow: none !important;
}
The reason for setting the values to **important** is that, if you are using other CSS libraries or frameworks like Bootstrap, it might get overridden.
The outline property is what you need. It's shorthand for setting each of the following properties in a single declaration:
outline-style
outline-width
outline-color
You could use outline: none;, which is suggested in the accepted answer. You could also be more specific if you wanted:
button {
outline-style: none;
}
button:focus{outline:none !important;}
add !important if it is used in Bootstrap
To avoid the problem caused when you change the outline property on a focus, is to give a visual effect when the user Tab on the input button or click on it.
In this case is a submit type, but you can apply to a type="button" too.
input[type=submit]:focus {
outline: none !important;
background-color: rgb(208, 192, 74);
}
Given the html below:
<button class="btn-without-border"> Submit </button>
In the css style do the following:
.btn-without-border:focus {
border: none;
outline: none;
}
This code will remove button border and will disable button border focus when the button is clicked.
As many others have mentioned, selector:focus {outline: none;} will remove that border but that border is a key accessibility feature that allows for keyboard users to find the button and shouldn't be removed.
Since your concern seems to be an aesthetic one, you should know that you can change the color, style, and width of the outline, making it fit into your site styling better.
selector:focus {
outline-width: 1px;
outline-style: dashed;
outline-color: red;
}
Shorthand:
selector:focus {
outline: 1px dashed red;
}
It's greatly simple than you think. When the button is focussed, apply the outline property, like this:
button:focus {
outline: 0 !important;
}
But when I use none value, it doesn't work for me.
Removing nessorry accessible event not a good idea in up to standard web developments.
either way if you looking for a solution removing just the outline doesn't solve the problem. you also have to remove the blue color shadow. for specific scenarios use a separate class name to isolate the this special style to your button.
.btn.focus, .btn:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
Better do this
.remove-border.focus, .remove-border:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
Removing the outline is an accessibility nightmare. People tabbing using keyboards will never know what item they're on.
Best to leave it, as most clicked buttons will take you somewhere anyway, or if you HAVE to remove the outline then isolate it a specific class name.
.no-outline {
outline: none;
}
Then you can apply that class whenever you need to.
Another alternative to restore outline when using the keyboard is to use :focus-visible. However, this doesn't work on IE :https://caniuse.com/?search=focus-visible.
It's also good note that outline: none can be applied to both <button> tags and input[type=button] to remove the browser-applied border on click.
Since Chrome and Mozilla added this line not only around buttons but also around linked text, I use on my site this:
a:focus {outline: none;
}
Works for both browsers, links, and buttons.
Btw, this did not (27.4.2021):
input[type=button]{
outline:none;
}
input[type=button]::-moz-focus-inner {
border: 0;
}
Ingredients: just an input tag of type text.
Question: How can I control the size, color, position of text-decoration: underline styling the input tag?
I saw that text-decoration-color is available but only in the moz web interpreter and I want something cross-browser like.
[EDIT] I accept JS, CSS, HTML, doesn't matter, but not any workaround: my question is specific, I want control over this specific attribute.
the easiest way is to remove the text decoration as :
text-decoration: none;
in your css file and use
border-bottom: 1px solid #FF0000;
instead of that, you can now change the color and size :)
what if you use
text-decoration: none;
border-bottom: 10px solid black;
so you have control over the border properties
You can simply use the CSS3 text-decoration-color property, it works with Chrome too.
Demo:
a {
text-decoration: underline;
-webkit-text-decoration-color: green;
text-decoration-color: green;
}
This is just a link
Note:
Notice the use of -webkit-text-decoration-color to make it compatible with Chrome.
You can check text-decoration-color Cross browser cpompatibility for further details about its browser support.
editing the text-decoration like, as you told, the color is possible. but font-size, position and more is hard. What you could do is instead of using the text-decoration is adding on your lets say <p> tag a border-bottom. Of this border you are able to change size and color. If you want to change the position or other things you should think of maybe adding a <div> with a <style> to edit all sort of things.
Use
text-decoration-color: #E18728;
text-decoration: underline dotted red;
Ref links:
https://css-tricks.com/almanac/properties/t/text-decoration-skip/
https://css-tricks.com/almanac/properties/t/text-decoration-style/
https://css-tricks.com/almanac/properties/t/text-decoration-line/
https://css-tricks.com/almanac/properties/t/text-decoration-color/
Here is another advanced way to get this done
HTML
<div class="underline-text"> This is Underlined text </div>
CSS
.underline-text{
position:relative;
padding-bottom:5px;
display:inline-block;
}
.underline-text:after{
position: absoulte;
bottom: 0px;
content: " ";
width:100%;
background:red;
height:2px;
left:0px;
}
Here is codepen.
https://codepen.io/sajiddesigner/pen/QvgeGO
You can do experiments there.
I Hope This example Help You :
a {
outline: none;
text-decoration: none;
border-bottom: 2px solid orange;
padding-bottom: 5px;
}
Hello World!
text-decoration is shorthand property for text-decoration-color, text-decoration-style and text-decoration-line.
syntax{
text-decoration : text-decoration-line text-decoration-style text-decoration-
color;
}
a{
text-decoration : underline red double;
}
So you can simple use text-decoration or individually define each property.
text-decoration-line - Is a style assigned to element and that can be underline, line-through, overline and such.
text-decoration-color - Is a color assigned to element.
text-decoration-style - Behaves much like
border-style, so you could use double, solid, dotted and such property values.
You can read more on this site.
And for compatibility with browser check on caniuse as some properties are partially supported.
a{
text-decoration-line:underline;
text-decoration-color:red;
text-decoration-style:double;
}
Text Decoration
Color and style of text-decoration
Text decoration is limited in CSS. The specs in CSS3 says you have these settings but actually only firefox supports them:
text-decoration-line
text-decoration-style
text-decoration-color
Size of text-decoration
You have a little bit control of the size of the line with font-style attribute. So as you can see it is relative to the font-size.
p {
text-decoration: underline;
}
#test1 {
font-size: 14px;
}
#test2 {
font-size: 40px;
}
<p id="test1">test 1</p>
<p id="test2">test 2</p>
Position of text-decoration
There is the attribute text-underline-position. But as the other attributes it is mostly not supported by the major Browsers. So sadly it is not possible to control the position of the text decoration.
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;}
I've been searching for a good hour but no one seems to have had the same problem.
I am trying to change the text color of a link to grey, it is appearing blue however. I specifically want to achieve this by setting a class property of the link - I don't want custom css in the aspx file, and I don't want to set the style property of the link. (For the record I have tried both of these ways and they work).
//Site.css
.grey {
color: grey;
}
.button-link2 {
padding: 10px 15px;
background: #EFEFEF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-transition-duration: 0.2s;
text-decoration: none;
cursor: pointer;
}
And the link the way I would like it to work:
<a id="btnCancel" href="CMS-contentlist.aspx" class="grey button-link2">Cancel</a>
Thanks in advance!
you would either need to apply the text color to the element outside of the link or add the a attribute.
a.grey,
.grey {
...
}
Make this as important. Use only if it's necessary
//Site.css
.grey {
color: grey !important;
}
Just wanted to confirm that you have below piece:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Is it the spelling mistake? Try "Gray" instead of "grey"
The problem is, you might have in the same Site.css other link settings that override yours. By default, there are such style properties defined for hyperlinks. Get rid of those, or use this:
#btnCancel.grey {
color: grey;
}
This type of problem is fairly easy to solve with a DOM inspection tool like Chrome Developer Tools. In Chrome, right-click on the element and select "Inspect element" and in the window that pops up you will be able to see all of the possible declarations that could be overrriding your .grey class's color declaration.
And be sure you know your CSS specificity rules really well.
do not use !important, if you can avoid it.
.grey
{
color:gray;
}
This will work.