How can I change the border/outline color for input and textarea elements in Twitter Bootstrap?

Question

I want to change the color of bootstrap textbox from the default blue. tried:

.input-small,
.input-medium {
    border-color: #E56717;
}

Not of much help. Also tried ":focus"

Do you want to change the default focus blue color for input smalles right ? — underscore, Jun 13 '13 at 21:42

score 79 · Accepted Answer · answered Jun 13 '13 at 21:41

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

score 7 · Answer 2 · answered Jan 19 '14 at 22:08

7

If you are using bootstrap 3 with LESS, you can set the variable @input-border-focus. This variable can be found in variables.less.

answered Jan 19 '14 at 22:08

Beel

1,000
12
23

score 0 · Answer 3 · answered Nov 15 '15 at 14:55

0

To whom visited this page and didn't find a solution, what I did is replacing -webkit-focus-ring-color with desired color and it works just fine!

answered Nov 15 '15 at 14:55

Mohamed Mo Kawsara

4,400
2
27
43

1

Won't work on non-webkit browsers. But you know this. – Kees Briggs Dec 17 '16 at 21:08

score 0 · Answer 4 · answered Feb 26 '21 at 06:56

0

change box-shadow color input[type]:focus{ box-shadow: none; }

answered Feb 26 '21 at 06:56

Om Rajbanshi

1

How can I change the border/outline color for input and textarea elements in Twitter Bootstrap?

4 Answers4

Linked