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

Question

我正在尝试为我的网站制作联系表格，which can be previewed here.

我使用 Bootstrap Validator 脚本来添加验证 icons/checks。 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伪class会增加<input />的z-index值到 3，而 .form-control-feedback class 保持 z-index 为 2.

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

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

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

Answer 2

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

当您 select 输入时，其图标位于输入的 z 索引的 cos 后面。也许尝试改变它？

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

Glyphicon on textbox disappears when selected

html

twitter-bootstrap

glyphicons

twitter-bootstrap-3