Bootstrap - Border color of textfield

Question

Good day everyone! I'm currently designing my login form using CSS and Bootstrap. When I focused my mouse in to username textfield, the border-color of it turns in to blue. I want to change the border-color of the textfield.

Code:

 <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #1b4d32;">
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    </div>  
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background: #F1C40F;">
        <form role="form" method="post" action="<?=base_url()?>login/login_submit" class="form-inline justify-content-center text-center">
            <br/><br/><br/><br/><br/><br/>
            <p id="sign-lbl" style="text-align: center">Please enter your username and<br/>
            password to login.</p><br/><br/>
            <div class="form-group">
                <div class="col-xs-6">
                    <div class="inner-addon right-addon">
                        <i class="glyphicon glyphicon-user"></i>
                        <input type="text" name="username" id="email" class="form-control textfield-des" placeholder="Username" style="border-radius: 25px;">
                    </div>
                </div>
            </div><br/><br/>
            <div class="form-group">
                <div class="col-xs-6">
                    <div class="inner-addon right-addon right-addon-1">
                        <i class="glyphicon glyphicon-lock"></i>
                        <input type="password" name="password" id="password" class="form-control" placeholder="Password" style="border-radius: 25px;">
                    </div>
                </div>
            </div>
            <br/><br/>
            <span class="button-checkbox">
                <button type="button" class="btn" data-color="info">Stay Signed In</button>
                <input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">

            </span>
            <a href="<?=base_url()?>login/forgotpassword" class="btn btn-link">Forgot Password?</a>

            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6">
                    <input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">
                </div>
            </div>  
        </form>
    </div>
 </div>

This is the output:

Answer 1

Use this:

   .form-control:focus {
      border-color: #000;
    }

Answer 2

Add this to your css file

.input:focus {
            outline: none !important;
            border:1px solid red;
            box-shadow: 0 0 10px red;
        }

Don't forget to add the input class to the input element in your html file