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;
}
Remove default focus outline and change to different color
It's a box-shadow
style applied on focus.
add this code to remove it:
.form-control:focus {
box-shadow:none;
}
You may add !important
depending on your CSS order:
How to change focus glow of textarea in Bootstrap 3?
Try using:
textarea:focus, input:focus, .uneditable-input:focus {
border-color: rgba(229, 103, 23, 0.8) !important;
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6) !important;
outline: 0 none !important;
}
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;
}
How to remove outline in bootstrap 4
The theme you're using sets box-shadow
to inset 0 -2px 0 #2196F3
on focus
.
You need to override it, but not with none
, because that would just remove it. You probably want it to remain at same value like when it's not focused. In short, you need this:
textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
box-shadow: inset 0 -1px 0 #ddd;
}
Also note you need to load this CSS after Bootstrap CSS and the theme you're loading.
Override twitter bootstrap Textbox Glow and Shadows
.simplebox {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
Related Topics
CSS to Align Label and Inputs on Form
Background Video with 100% Width and Fixed Height
Create Line Numbers on Pre with CSS Only
How to Print a Portion of an HTML Page
How to Put a Bootstrap Glyphicon Inside an Asp:Button in Asp.Net
How to Make a Div with Irregular Shapes with CSS3 and HTML5
<Form Method="Link" > or <A>? What's The Difference
How to Get a Textarea to Stretch to Fit Its Content Without Using PHP or JavaScript
Square Div Where Height Is Equal to Viewport
How to Display HTML <Form> as Inline Element
<Table> with Fixed <Thead> and Scrollable <Tbody>
Meta Viewport Just on Portrait
Filter Extensions in HTML Form Upload
Table Overflowing Outside of Div
How to Tell Browsers to Honor The Jpeg Exif Orientation
Should I Use <Ul>S and <Li>S Inside My <Nav>S
How to Navigate to a Section of a Page
Why Does Naming Your HTML Form Submit Button "Submit" Break Things