Override twitter bootstrap Textbox Glow and Shadows
I want to remove the Blue glow of the textbox and the border, but i don't know how to override any of the js or the css of it, check Here
EDIT 1
I want to do this because i am using the jquery plugin Tag-it and i am using twitter bootstrap also, the plugin uses a hidden textField to add the tags, but when i am using twitter bootstrap it appears as a textbox with glow inside a textbox which is a little bit odd
Solution 1:
.simplebox {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
Solution 2:
You can also override the default Bootstrap setting to use your own colors
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(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
Solution 3:
input.simplebox:focus {
border: solid 1px #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: none;
-moz-transition: none;
-webkit-transition: none;
}
sets to bootstrap unfocused style