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;}
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;
}
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 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;}
How do I remove the default yellow box border of Selected input and select fields in chrome or any browser like safari?
I want to customize input with custom box shadow css. How do I remove the default browser select border?
-webkit-appearance: none;
and add your own style
textarea, input { outline: none; }
via https://stackoverflow.com/a/935572/1036298
Mixin for Less
.appearance (#value: none) {
-webkit-appearance: #value;
-moz-appearance: #value;
-ms-appearance: #value;
-o-appearance: #value;
appearance: #value;
}
use simple code for remove default browser style for outline
input { outline: none; }
In your CSS add this:
input {-webkit-appearance: none; box-shadow: none !important; }
:-webkit-autofill { color: #fff !important; }
Only for Chrome! :)
input:-webkit-autofill {
background: #fff !important;
}
Are you talking about when you click on an input box, rather than just hover over it? This fixed it for me:
input:focus {
outline: none;
border: specify yours;
}
When looking at an input with a type of number, you'll notice the spinner buttons (up/down) on the right-hand side of the input field. These spinners aren't always desirable, thus the code below removes such styling to render an input that resembles that of an input with a type of text.
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
Before Applying Property box-shadow : none
After Applying Property box-shadow : none
This is the easiest solution and it worked for me
input {
box-shadow : none;
}
When you click input box then you can see the default style. You want to remove it and add your own style then apply below code...
Method 1:
input:focus {
outline: none;
}
Method 2:
input:focus, textarea:focus, select:focus{
outline: none;
}
Hope you useful this...