Override twitter bootstrap Textbox Glow and Shadows

Question

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

Do you have the ability to add a new class? If so just add a new class with `border:none; box-shadow:none;` — jeschafe, Aug 30 '12 at 15:40
@jeschafe [Here](http://jsfiddle.net/fadykamal/pE5mQ/62/) ,and still nothing — Fady Kamal, Aug 30 '12 at 15:41
this helped me: [bootstrap change color of input text border/outline][1] [1]: http://stackoverflow.com/questions/17097512/bootstrap-change-color-of-input-text-border-outline — change, Jun 26 '13 at 21:27

score 144 · Accepted Answer · edited Sep 07 '16 at 13:58

144

.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

edited Sep 07 '16 at 13:58

laurent

88,262
77
290
428

answered Aug 30 '12 at 15:44

jeschafe

2,683
1
14
13

score 29 · Answer 2 · answered Jan 16 '13 at 20:32

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);
}

it's worth noting that the ` – Bryce York Mar 31 '14 at 07:55 — Bryce York, Mar 31 '14 at 07:55

score 11 · Answer 3 · answered Aug 30 '12 at 15:49

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

Dimgba Kalu · Answer 4 · 2015-03-27T19:26:55.700

8

if you think you can't handle the css class then simply add style to the textfield

<input type="text" style="outline:none; box-shadow:none;">

edited Mar 27 '15 at 19:26

answered Oct 27 '12 at 01:12

Dimgba Kalu

143
9

score 8 · Answer 5 · answered May 06 '14 at 14:34

After doing some digging, I think they changed it in the latest bootstrap. The below code worked for me, its not simple box its form-control that I was using that was causing the issue.

input.form-control,input.form-control:focus {
    border:none;
    box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -moz-transition: none;
   -webkit-transition: none;
}

score 7 · Answer 6 · answered Sep 01 '14 at 01:18

7

Go to Customize Bootstrap, look for @input-border-focus, enter your desired color code, scroll down and click "Compile and Download".

answered Sep 01 '14 at 01:18

Glyn Jackson · Answer 7 · 2012-08-30T16:13:59.297

6

this will remove the border and the focus blue shadow.

input.simplebox,input.simplebox:focus {
  border:none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -moz-transition: none;
  -webkit-transition: none;
}

http://jsfiddle.net/pE5mQ/64/

edited Aug 30 '12 at 16:13

answered Aug 30 '12 at 15:40

Glyn Jackson

8,228
4
29
52

score 4 · Answer 8 · answered Dec 04 '13 at 09:55

4

On bootstrap 3 there is a small top shodow on ios, could be removed with this:

input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
    -webkit-appearance: caret;
    -moz-appearance: caret; /* mobile firefox too! */
}

Got it from here

answered Dec 04 '13 at 09:55

chris

4,827
6
35
53

1

Looking at the comments from the link you provided, usually better to use 'none' instead of 'caret'. – Ryan Walton Feb 08 '14 at 21:45

score 2 · Answer 9 · edited Nov 03 '17 at 16:59

2

Vendor prefixes aren't necessary at this point, unless you're supporting legacy browsers, and you could simplify your selectors by just referring to all inputs rather than each of the individual types.

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  box-shadow: none;
}

edited Nov 03 '17 at 16:59

bert

3,989
4
16
32

answered Nov 03 '17 at 16:13

Melanie Ceraso

509
5
6

score 0 · Answer 10 · answered Dec 31 '19 at 13:01

0

HTML

<input type="text" class="form-control shadow-none">

CSS

input:focus{
    border: 1px solid #ccc
}

answered Dec 31 '19 at 13:01

Savan Padaliya

828
1
11
22

score 0 · Answer 11 · answered Nov 01 '20 at 06:56

0

.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}

answered Nov 01 '20 at 06:56

Pradip Kachhadiya

2,067
10
28

score 0 · Answer 12 · answered Jan 12 '22 at 14:02

So far none of the answers helped me out in this thread. What solved it for me was

/*Shadow after focus - Overwrites bootstrap5 style for btn classes*/
.btn-check:focus + .btn-primary, 
.btn-primary:focus {
    box-shadow: 0 0 7px 7px rgba(4,220,93,255);
}
/*Shadow while clicking (Animation) - Overwrites bootstrap5 style for btn classes*/
.btn-check:active + .btn-primary:focus, 
.btn-check:checked + .btn-primary:focus, 
.btn-primary.active:focus, 
.btn-primary:active:focus, 
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(10, 102, 37, 0.493);
}

Override twitter bootstrap Textbox Glow and Shadows

12 Answers12

Linked