Bootstrap Form border gradient

Question

By default, clicking on a Bootsrap Form will display a gradient of color on the borders.

Is there a way to modify the bootsrap.css or bootsrap.js to display an other color for the gradient?

Here is a Fiddle with the example on the picture above: https://jsfiddle.net/bb61c412/122/

And the code:

#form-default {
  margin-top: 50px;
  width: 300px;
}
#form-green {
  border: 1px solid #000000;
  margin-top: 50px;
  width: 300px;
}

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />


<div class="form-group">

  <select id=form-default name="Form1" class="form-control">
    <option value="0">Form1</option>
    <option value="1">Option2</option>
    <option value="2">Option3</option>
  </select>

  <select id=form-green name="Form2" class="form-control">
    <option value="0">Form2</option>
    <option value="1">Option2</option>
    <option value="2">Option3</option>
  </select>

</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

score 3 · Accepted Answer · edited May 23 '17 at 11:45

3

As seen in this answer..

Change Bootstrap input focus blue glow

Override the .form-control:focus blue glow..

.form-control:focus {
      border-color: #FF0000;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

Updated fiddle: https://jsfiddle.net/bb61c412/123/

edited May 23 '17 at 11:45

Community

1
1

answered Mar 23 '16 at 12:55

Carol Skelly

351,302
90
710
624

score 1 · Answer 2 · answered Mar 23 '16 at 12:55

You simply need to override this bit of CSS by bootstrap:

.form-control:focus {
    border-color: #66AFE9;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
}

The blue part of the gradient is rgba(102, 175, 233, 0.6), so change it to whatever you want.

score 1 · Answer 3 · answered Mar 23 '16 at 12:55

1

.form-control:focus, .form-control:active, .form-control:hover {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(0, 0, 0, 0.6);
    outline: 0 none;
}

answered Mar 23 '16 at 12:55

Sunny Techo

68
7

score 1 · Answer 4 · answered Mar 23 '16 at 12:57

1

This will alter the border color. The box-shadow changes the gradient portion. Adding :focus makes it occur only when you have it selected.

#form-default:focus {
  box-shadow: 0 0 5px green;
  padding: 3px;
  margin: 5px;
  border: 1px solid red;
}

answered Mar 23 '16 at 12:57

Danielson

88
1
8

score 1 · Answer 5 · answered Jul 06 '17 at 09:06

 .form-control
  {
   border-color: rgba(126, 239, 104, 0.8) !important;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6) !important;
   outline: 0 none !important;
  }
 .form-control:hover
  {
     border-color: blue !important;
  }

score 0 · Answer 6 · edited Aug 18 '17 at 10:46

0

change the .form-control:focus blue glow..

.form-control:focus{ 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); } to change above color code

edited Aug 18 '17 at 10:46

devadinesh

137
3
13

answered Aug 18 '17 at 10:42

Bootstrap Form border gradient

6 Answers6