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;
}
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;
}
Bootstrap textarea focus not responding to CSS change
Setting it as a new rule didn't work. But adding important as well as a new rule did:
textarea:focus {
border-width:2px !important;
border-color: #BD2525 !important;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.075) inset, 0 0 0px rgba(126, 239, 104, 0.6) !important;
outline: 0 none !important;
}
How to change border color of textarea on :focus
.input:focus {
outline: none !important;
border:1px solid red;
box-shadow: 0 0 10px #719ECE;
}
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;
}
Remove all stylings (border, glow) from textarea
The glow effect is most-likely controlled by box-shadow. In addition to adding what Pavel said, you can add the box-shadow property for the different browser engines.
textarea {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
resize: none; /*remove the resize handle on the bottom right*/
}
You may also try adding !important to prioritize this CSS.
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;
}
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;
}
Related Topics
How to Gzip @Font-Face Example
How to Center an Image Within a Col Element in Bootstrap 3+
Mvc: I Have Deployed My Application, But CSS Only Works When I Log In
Change The Size /Spacing of Label Text in R Shiny Fileinput
Firefox Displaying Table-Cell Incorrectly (Chrome Working Good)
Large Iconfont Icon Cut Off on The Right Side
CSS Start Repeating Background from Defined Position
Angular Error: Postcss Received Undefined Instead of CSS String
Why Does The Overflow-Y Property Not Work with Percent Height
Remove White Space Under Footer
Page Styles Break When I Change Styles in Chrome Devtools with Webpack Hmr
Slide Flickering with CSS Transitions
Overflow Property Returning Auto Value
CSS3 Transition - Change Animation "Anchor Point"
CSS Ul Li Image to Align with Text
Using CSS Attribute Selectors to Target The Src of Background-Image
Primefaces Datatable Selectcheckboxmenu Filter Formatting Issue