Question

我在HTML表单上使用bootstrap v3.1.1（下面的代码）。以前，表单边框很好 - 但是，当我在表单字段中添加图标的范围时，边框不再明显可见。除了在我可以/应该使用的表单字段上使用边框样式之外还有什么东西吗？提前谢谢。

<form id="login" method="POST" action="/xyz/login" role="form" novalidate>

      <div class="form-group">
        <label for="username">&nbsp;Email Address</label>
        <div class="input-group">
           <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>   
           <input type="text" name="username" id="username" placeholder="Enter username" autocomplete="on" required data-required-msg="Username is required" 
           autofocus tabindex="1" class="form-control">
        </div>  
      </div>

      <div class="form-group">
        <label for="password">&nbsp;Password</label>
        <div class="input-group">
           <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>  
           <input type="password" name="password" id="password" placeholder="Enter password" class="form-control" 
           required data-required-msg="Password is required" tabindex="2" autocomplete="off" class="form-control">
        </div>
      </div>
  <br>

  <div class="form-group">
       <button id="submit" class="submit" type="submit" tabindex="3" class="btn btn-default">Login</button>
  </div>

</form>

Answer 1

飞行员错误 - 我的样式表中有以下规则导致问题。删除此规则为我解决了这个问题。

input[type=text]{
   -webkit-appearance:none;
   outline:none;
   border:none;
}

HTML表单字段边框样式

1 个答案: