Question

制作联系表单

我使用Bootstrap Validator脚本添加验证图标/检查。但是，当选择与脚本一起使用的文本框时，验证图标将消失，如下所示：

这也发生在其他框中（除了主题框，我没有激活验证脚本。）我该如何解决这个问题？它适用于CodePen，但不在我的网站上。

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伪类添加到元素会将z-index的{{1}}值增加到3，而<input /> class维持.form-control-feedback为2。

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

z-index

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

Answer 2

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

当您选择输入时，其图标会落在输入z索引的cos后面。也许尝试改变它？

选中后，文本框上的Glyphicon将消失

2 个答案: