I'm using materializecss for my project but I have a problem.
I have disabled the outline of the inputs but the inputs still showing up a weird outline on focus.
This is the css for the inputs
.inputs input[type=text]:focus {
border: 1px solid #FFFFFF!important;
background-color: #FAFAFA!important;
box-shadow: none!important;
outline:none!important;
}
This is likely the :active pseudo class as it seems like the border is changing when you click.
Try making a rule that changes both the focus and active pseudo classes.
.inputs input[type=text]:active,
.inputs input[type=text]:focus {
border: 1px solid #FFFFFF!important;
background-color: #FAFAFA!important;
box-shadow: none!important;
outline:none!important;
}
I don't see a question here, but I am assuming you want to get rid of the outline altogether?
If you provide more details I'll be able to give more accurate answer, but first thing that comes to mind from looking at provided gif is that maybe that outline comes from an :active state.
You can remove outline for both states on the bare element and see if that has some impact:
input:focus,
input:active {
outline: none;
}
If this didn't solve your problem, please give some more input (pun intended :)) and we'll figure it out.
Best,
N.
P.S. Upon further inspection, it seems to me that when you click, the border is set. That's also why your input fields move a little bit (can you see that)? Please update your code. This should be trivial.
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;
}
I'm trying to style the outline of the field when in focus because my current outline is very hard to see. I know that some html elements are focusable by default, so I'm not quite sure to what element to attach the outline style.
Do I need to target all the potentially focusable elements? Like
a:focus, button:focus {outline: 1px solid white; }
(including all the other elements)? This does not seem like the right method.
I have tried searching for the answer and all I can find is that outline must not be none but other than then, I haven't found anything else.
Just go
:focus { outline: 1px solid white; }
to target all focussable elements. No need to specify those elements explicitly.
Btw, this is short for
*:focus { outline: 1px solid white; }
I'm making my firs steps learning to code. I've been taken some courses on Internet and now I decided to continue learning from the experience while I build a Wordpress child theme.
The thing is that I made a summary. And when it's active it has a blue border.
I'm trying to remove it but I can't find a solution.
I tried suing this without success:
summary:active {
border:none;
}
Do you have some suggestion?
summary:focus{
outline: none;
}
The browser is rendering a border around the summary while it is on focus.
Problem: Its not the border but a outline that browsers render.
Solution: Set outline:none on the element.
So the code would be
summary:focus{
outline: none;
}
To remove it from all inputs
input {
outline: none;
}
To remove it from all tags use the universal selector *:
*:focus {
outline: none;
}
The problem is the input field, not the summary class itself. You can try removing it by using the following code:
input:focus{
outline:none;
}
Hope it helps
People have said to remove with outline: none, which will remove the outline.
However, from an accessibility perspective you should replace the outline with one that fits the brand guidelines.
The outline on an element's focus state is to ensure that someone can tell where they are. Not all users have a point-and-click device, and even if they do, they won't leave their mouse hovering over an element at all times. For field inputs it's worth keeping an outline or other focus style so users know which field they're in.
The A11y Project (accessibility project) has some useful information which covers what I've said.
I'd suggest that rather than doing:
summary:focus {
outline: none !important
}
You talk to the designer to come up a positive focus style, e.g.:
summary:focus {
background: #ffeeee;
color: #242424;
outline: none
}
If it is an input field try this
input:focus{
outline: none !important;
}
I was able to make the blue outline disappear in Safari 10 with:
summary {outline:none;}
Funny thing is that I can't change the specific color of the outline:
summary:focus{outline:red;}
Αlso removed the outline. Using solid and dotted all work as specified, and display it black.
But it looks like the blue color is hard-coded into focused input fields. The very text box I'm using right now has the same light blue outline. Maybe that can't be changed, but you can suppress its visibility or restyle it. You just can't specify a color.
*.no-outline > * :focus {
outline: none;
}
This would remove any the outline for any tag with class no-outline, and also it will remove outline for all its children.
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!
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?