选择时文本框上的字形图标消失

Question

我正在尝试为我的网站创建联系表，which can be previewed here.

我使用 Bootstrap Validator 脚本添加验证图标/检查。 However, when a textbox is selected that is used with the script, the validation icon disappears, like this:

其他框也会出现这种情况（主题框除外，我没有为其激活验证脚本。）我将如何解决这个问题？它适用于 CodePen，但不适用于我的网站。

Here's the HTML for the page.

HTML 和 CSS 仅用于表单：

<div class="container">
<form class="well form-horizontal" action="https://formspree.io/example@example.com" method="post" id="contact_form">
<fieldset>

  <!-- Form Name -->
  <legend>Contact Me</legend>

  <!-- Text input-->

  <div class="form-group">
    <label class="col-md-4 control-label">Name <label class="text-danger">*</label></label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
        <input name="name" placeholder="Name" class="form-control" type="text">
      </div>
    </div>
  </div>

  <!-- Text input-->
  <div class="form-group">
    <label class="col-md-4 control-label">Email <label class="text-danger">*</label></label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
        <input name="email" placeholder="Email Address" class="form-control" type="text">
      </div>
    </div>
  </div>

  <!-- Text input-->
  <div class="form-group">
    <label class="col-md-4 control-label">Subject</label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-comment"></i></span>
        <input name="_subject" placeholder="Subject" class="form-control" type="text">
      </div>
    </div>
  </div>

  <!-- Text area -->

  <div class="form-group">
    <label class="col-md-4 control-label">Message <label class="text-danger">*</label></label>
    <div class="col-md-4 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
        <textarea class="form-control" name="input" placeholder="Message"></textarea>
      </div>
    </div>
  </div>

  <!-- Config -->
  <input type="hidden" name="_next" value="/contactthanks.html" />

  <!-- Required fields text -->
  <div class="form-group">
    <label class="col-md-4 control-label"></label>
    <div class="col-md-4">
      <div class="text-danger">* Required field</div>
    </div>
  </div>

  <!-- Button -->
  <div class="form-group">
    <label class="col-md-4 control-label"></label>
    <div class="col-md-4">
      <button type="submit" class="btn btn-primary"><span class="fa fa-send"></span> Send</button>
    </div>
  </div>

 </fieldset>
</form>
</div>
</div>

textarea {min-height:50px; resize:vertical;}

在此先感谢，对于这个冗长的问题，我们深表歉意。

Answer 1

使用 Chrome 开发者工具，可以看到在元素中添加 :focus 伪类将 <input /> 的 z-index 值增加到 3，而 .form-control-feedback 类保持 z-index 为 2 .

添加此选择器似乎可以解决它：

 input:focus ~ .form-control-feedback {
     z-index: 3;
 }

但是，我的猜测是这是 Bootstrap 中的预期行为，因此图标不会在用户键入时妨碍。

Answer 2

.input-group .form-control:focus {
    z-index: 3;
}

当您选择一个输入时，其图标位于输入的 z 索引的 cos 后面。可以试试换吗？