How can I change the border/outline color for input and textarea elements in Twitter Bootstrap?
I presume you're speaking about the blue glow on focus? Try this:
textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
border-color: rgba(229, 103, 23, 0.8);
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6);
outline: 0 none;
}
How to change border color of textarea on :focus
.input:focus {
outline: none !important;
border:1px solid red;
box-shadow: 0 0 10px #719ECE;
}
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 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 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;
}
Bootstrap - Border color of textfield
Use this:
.form-control:focus {
border-color: #000;
}
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
Why Do I Have to Put Media Queries at the Bottom of the Stylesheet
Text with Image Background in Svg or CSS
Flexbox Max-Height Issue with Ie11
How to Create Custom Scrollbar for Mozilla Firefox with CSS
Apply a CSS Filter Only on Background
Difference Between Justify-Content VS Align-Items
Why Is Gmail Blocking CSS in Emails
Position Fixed Not Working Is Working Like Absolute
CSS Calc() - Multiplication and Division with Unit-Ed Values
Keep Div Height Relevant to Aspect Ratio
What Happens When Nesting Elements with Position: Fixed Inside Each Other
Css3 Animation and Background-Image in Firefox
CSS Transform: Scale Does Not Change Dom Size
Do Double Forward Slashes Direct Ie to Use Specific CSS
Retina Displays, High-Res Background Images
CSS Div Width Percentage and Padding Without Breaking Layout
CSS Flexbox Vertically/Horizontally Center Image Without Explicitely Defining Parent Height