Removing the blue glow from an HTML text input when selected
This should do it:
input:focus {
outline:none;
}
EDIT (2015): If you are designing for a wide audience, recall that the outline is often a critical accessibility feature for users who navigate via keyboards or require more apparent visual feedback. If you remove the outline, make sure to define an alternative focus state that provides appropriate visual feedback to your users.
Change Bootstrap input focus blue glow
In the end I changed the following css entry in bootstrap.css
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(126, 239, 104, 0.8);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
outline: 0 none;
}
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;
}
How to remove border(focus-indication) of input field while it is clicked
This is .field:focus{outline: none}
not .field:focus{border: none}
Remove Safari/Chrome textinput/textarea glow
Edit (11 years later): Don't do this unless you're going to provide a fallback to indicate which element is active. Otherwise, this harms accessibility as it essentially removes the indication showing which element in a document has focus. Imagine being a keyboard user and not really knowing what element you can interact with. Let accessibility trump aesthetics here.
textarea, select, input, button { outline: none; }
Although, it's been argued that keeping the glow/outline is actually beneficial for accessibility as it can help users see which Element is currently focused.
You can also use the pseudo-element ':focus' to only target the inputs when the user has them selected.
Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/
How come I can't remove the blue textarea border in Twitter Bootstrap?
You have write -webkit-appearance:none;
like this:
textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
outline:0px !important;
-webkit-appearance:none;
box-shadow: none !important;
}
Getting rid of the blue focus rectangle on input boxes in HTML/CSS?
It is in fact a CSS attribute. This will hide that glowing effect:
input:focus, textarea:focus {
outline: none;
}
How To Disable Blue Glow For Html Button In Ie9
I was just hoping to get rid of the blue color.
You can't just get rid of it, because Internet Explorer uses the native buttons, from your system theme. Take a look at any system dialog box with a button, for example when you change your wallpaper.
You can only remove the blue inner glow if you're willing to style a decent looking button yourself, starting with setting a border
/background
(which disables using the native style).
How do I remove the blue border that appears when clicking on a uib-accordion-heading?
Solution
:focus {outline:0 !important;}
This code all focus border remove.
Related Topics
How a CSS Pixel Size Is Calculated
Differencebetween the Selectors ".Class.Class" and ".Class .Class"
Twitter Bootstrap Scrollable Modal
Font Awesome 5 Font-Family Issue
Should I Avoid Using "Text-Align: Justify;"
Less: Inheritance Using a Variable
Need to Stylize Area Tag Inside Map
How to Make My Font Bold Using CSS
Visual Studio Code CSS Indentation and Formatting
CSS Image Max-Width Set to Original Image Size
Css3 Fallback for Older Browsers
Twitter Bootstrap White Gap on Right Side of Page
Why Do Professional-Made Websites Have Odd #Id and .Class Names
Bootstrap Collapsed Menu Not Pushing Content Down When Expanded
Weird Behavior in Firefox with Outlines and Pseudo-Elements
What Are Most Useful Media="Print" Specific, Cross Browser Compatible CSS Properties