How to change Bootstrap default input focus glow style

Topic: Bootstrap / Less« Prev|Next »

Answer: Use the CSS box-shadow Property

By default, all the textual <input> elements, <textarea>, and <select> elements with the class .form-control highlighted in blue glow upon receiving the focus in Bootstrap. However, you can modify this default focus glow or shadow styles by simply setting the CSS border-color and box-shadow property, like this:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Override Bootstrap Input Focus Styles</title>
  • <link rel="stylesheet" href="css/bootstrap.min.css">
  • <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  • <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  • <script src="js/bootstrap.min.js"></script>
  • <style type="text/css">
  •     .form-control:focus {
  •         border-color: #ff80ff;
  •         box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255, 100, 255, 0.5);
  •     }
  • </style>
  • </head>
  • <body>
  •     <form>
  •         <div class="form-group">
  •             <label>Name</label>
  •             <input type="text" class="form-control" placeholder="Full Name">
  •         </div>
  •         <div class="form-group">
  •             <label>Address</label>
  •             <textarea class="form-control" rows="4" placeholder="Mailing Address"></textarea>
  •         </div>
  •          <div class="form-group">
  •             <label>Country</label>
  •             <select class="form-control">
  •                 <option>Select</option>
  •                 <option>India</option>
  •                 <option>USA</option>
  •                 <option>UK</option>
  •             </select>
  •         </div>
  •         <div class="checkbox">
  •             <label><input type="checkbox"> Agree with Terms and Conditions</label>
  •         </div>
  •         <button type="submit" class="btn btn-primary">Send</button>
  •     </form>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.