如何修改引导文本输入字段以使文本在焦点上切掉顶部？

Question

我想这会是一个很难的问题，但我很好奇我如何使用CSS （可能是动画）来修改{{1}具有与此类似的功能：

我找到了一些不同的例子，但它们只是真正有助于获得bootstrap外观，如下所示：

有关如何实施此建议的任何建议？我被困了

Answer 1

这可能会对你有所帮助。检查jsfiddle https://jsfiddle.net/xo5gdp8r/

span {
    position: absolute;
    z-index: 1;
    top: 5px;
    color: red;
    background: #fff;
    left: 15px;
    padding: 0 10px;
}

input {
   margin: 15px 10px;
   border: 1px solid red;
   padding: 10px;
   width: 200px;
}

您需要将其包装在div中并提供相对于div的位置。

Answer 2

我也会说类似的话 您的HTML应该看起来

<div class="form-group">
    <div class="error-message">is required field.</div>
    <input class="form-control" required placeholder="Input field" /> 
 </div>

CSS应该是：

.form-group .error-message{
  display:none;
}
.form-group.required .form-control{
   border-color:red;
}
.form-group.required .error-message{
   display:inline-block;
   color:red;
   position:absolute;
   background-color:#fff;
   margin-top: -10px;
   margin-left: 20px; 
}

和JS可以是：

(function(){
  $('.form-control[required]').on('blur',function(){
    if(!$(this).val()){
      $(this).parent().addClass('required');
    }
  });
})();

您可以看到它的实际效果：https://codepen.io/FaridNaderi/pen/EXQzJK