为什么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; ，大​​多数情况下我可以说这不是不是边框。输入框Border是白色的

Answer 1

此问题很可能是由于以下原因造成的：

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

您需要修复标记并使用结尾的</u>

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

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

Answer 2

请使用代码更新您的问题。

尝试：

style="border: none !important"

或：

style="text-decoration: none !important"

在输入div上

。