-1

How can I change the focus border-color individually using Bootstrap? The default is blue, but I need four different border-color on focus.

 <div class="row">
   <input type="text" class="form-control" placeholder="Color 1">
   <input type="text" class="form-control" placeholder="Color 2">
   <input type="text" class="form-control" placeholder="Color 3">
   <input type="text" class="form-control" placeholder="Color 4">
 </div>

I already tried to create my own css style, its not working. like this:

.color1, input:focus{  border-color: #DDD;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #AAA;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #AAA;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #AAA;};

then 

  <input type="text" class="color1 form-control" placeholder="Color 1">

but keep going with the original bootstrap.

And i tryed to change the bootstrap.css border-color

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;

It works to all input in the same color. But I need diferent colors.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Pajeh
  • 704
  • 7
  • 10

1 Answers1

3

Override this selector in your own CSS: https://github.com/twbs/bootstrap/commit/73c048578dfce7c6d4e8c9d4fe6c6bd22b2ff9b2

.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
mariocatch
  • 8,305
  • 8
  • 50
  • 71