CODEWITHSUNDEEP
csstwitter-bootstrap
change
change

Reputation: 3558

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

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"

Upvotes: 24

Views: 102663

Answers (4)

Om Rajbanshi
Om Rajbanshi

Reputation: 1

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

Upvotes: 0

Mohamed Mo Kawsara
Mohamed Mo Kawsara

Reputation: 4688

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!

Upvotes: 0

Beel
Beel

Reputation: 1030

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

Upvotes: 7

Ryan
Ryan

Reputation: 15250

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

Upvotes: 81

Related Questions