ブートストラップ - テキストフィールドの境界線の色

Question

おはようございます！私は現在、CSSとブートストラップを使って自分のログインフォームを設計しています。マウスをユーザー名のテキストフィールドに合わせると、その境界線の色が青色に変わります。私はテキストフィールドの境界線の色を変更したい。

コード：

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

これが出力されます：

Answer 1

CSSでこれを使用して、色を境に変更します。

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

Answer 2

CSSファイルにこれを追加

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

があなたのhtmlファイルに入力要素に入力クラスを追加することを忘れないでください