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>

这是输出：

here

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文件中的input元素

Bootstrap - 文本字段的边框颜色

2 个答案: