forms - 为什么 Bootstrap 4 Form 密码字段字体有意外的下划线？

Question

密码字段字体中出现意外的下划线 ，此表单位于bootstrap 4 模态中

<form method="post">
    <div class="form-group">
        <label for="username"><u>Username:</u></label>
        <input type="text" class="form-control" id="username" name="username" 
        autocomplete="off" autofocus required>
    </div>
    <div class="form-group"> 
         <label for="password"><u>Password:<u></label>
         <input type="password" class="form-control" id="password" 
         name="password" autocomplete="off" required>
         <a href="#">Forgot password?</a>
    </div>

    <div class="form-check">
        <label class="form-check-label" for="check">
             <input type="checkbox" class="form-check-input" id="check">Remember me
        </label>
    </div>
    <center>
         <button type="submit" name="login-btn" class="btn btn-success">Login</button>
    </center>
</form>

HTML 代码

.form-control,.form-control:focus{
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid white;
    border-radius: 0;
    color: white;
    background: none;
    outline: none;
    box-shadow: none;
    padding: 0;
}

.form-check{
    margin-top: 50px;
}

.form-check-input{
    margin-top: .4rem;
    width: 15px;
    height: 15px;
}

我应用的CSS我也尝试了 text-decoration:none; 大多数情况下我可以说这不是边框。输入字段边框是白色的

标签： formsbootstrap-4

Answer 1

问题很可能是由于这一行：

<label for="password"><u>Password:<u></label>

您需要修复标记并使用关闭</u>

<label for="password"><u>Password:</u></label>

见小提琴：https ://jsfiddle.net/gjLwxk2v/6/