How to reset / remove chrome's input highlighting / focus border?
You should be able to remove it using
outline: none;
but keep in mind this is potentially bad for usability: It will be hard to tell whether an element is focused, which can suck when you walk through all a form's elements using the Tab key - you should reflect somehow when an element is focused.
How to remove focus border (outline) around text/input boxes? (Chrome)
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
How to remove the border highlight on an input text element
Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.
In your case, try:
input.middle:focus {
outline-width: 0;
}
Or in general, to affect all basic form elements:
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable
attribute set to true
(effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):
[contenteditable="true"]:focus {
outline: none;
}
Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:
*:focus {
outline: none;
}
cant remove blue highlight chrome on focus
Add this CSS
.help-center .hc-search-form:focus-within{
border: 0 none;
box-shadow: none;
}
Removing a focus color in Chrome
Use the outline: none
CSS property: http://jsfiddle.net/ZnefN/.
How can I get rid of input border in chrome?
form#search input[type="search"] {
-webkit-appearance: none;
}
Mind that this will disable the select element arrow.
Remove blue border from css custom-styled button in Chrome
Doing this is not recommended as it regresses the accessibility of your site; for more info, see this post.
That said, if you insist, this CSS should work:
button:focus {outline:0;}
Check it out or JSFiddle: http://jsfiddle.net/u4pXu/
Or in this snippet:
button.launch {background-color: #F9A300;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.launch:hover {cursor: pointer;background-color: #FABD44;}
button.launch {background-color: #F9A300;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.launch:hover {cursor: pointer;background-color: #FABD44;}
button.change {background-color: #F88F00;border: none;height: 40px;padding: 5px 15px;color: #ffffff;font-size: 16px;font-weight: 300;margin-top: 10px;margin-right: 10px;}
button.change:hover {cursor: pointer;background-color: #F89900;}
button:active {outline: none;border: none;}
button:focus {outline:0;}
<button class="launch">Launch with these ads</button> <button class="change">Change</button>
Related Topics
Css: Center Element Within a ≪Div≫ Element
How to Include One CSS File in Another
How to Remove the Url from My Print Css, So the Web Address Doesn't Print
Opacity of Div'S Background Without Affecting Contained Element in Ie 8
How to Style Default Confirm Box With Only Css
iOS 7 iPad Safari Landscape Innerheight/Outerheight Layout Issue
Css: Display:Inline-Block and Positioning:Absolute
How to Make Google Fonts Work in Ie
Why Doesn't This A:Visited CSS Style Work
What Has Bigger Priority: Opacity or Z-Index in Browsers
Scrolling a Flexbox With Overflowing Content
Remove Gutter Space For a Specific Div Only
What Is the Best CSS Framework and Are They Worth the Effort
Css3 Animation Not Working in Safari