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

No

Answer 1

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

Answer 2

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

Answer 3

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!