Bootstrap - 文本字段的边框颜色

Question

大家好！我目前正在使用 CSS 和 Bootstrap 设计我的登录表单。当我将鼠标聚焦到用户名文本字段时，它的边框颜色变为蓝色。我想更改文本字段的边框颜色。

代码：

 <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

使用这个：

   .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文件的输入元素中添加输入类