CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3
michltm
michltm

Reputation: 1469

Bootstrap Form border gradient

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

enter image description here

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>

Upvotes: 1

Views: 1558

Answers (6)

user8450943
user8450943

Reputation:

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

Upvotes: 0

shiva krishna
shiva krishna

Reputation: 222

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

Upvotes: 1

Danielson
Danielson

Reputation: 88

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

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362290

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/

Upvotes: 3

Sunny Techo
Sunny Techo

Reputation: 68

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

Upvotes: 1

Holt
Holt

Reputation: 37606

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.

Upvotes: 1

Related Questions