css – Bootstrap 4表单输入,带有用于验证的图标

在Bootstrap 3中,每个验证状态都有可选的图标.该图标将显示在输入的右侧,使用has-Feedback,has-success,has-danger等等类.

如何使用有效反馈或无效反馈类在Bootstrap 4中获得相同的功能？

解决方法

Bootstrap 4不包含图标(字形图已消失),现在只有2个验证状态(有效且无效)控制有效反馈和无效反馈文本的显示.

使用一些额外的CSS,您可以在输入内(右侧)放置一个图标,并在窗体控件输入上使用is-valid或is-invalid控制其显示.使用像fontawesome这样的字体库来显示图标.我创建了一个新的反馈图标类,您可以将其添加到有效/无效反馈中.

.valid-Feedback.Feedback-icon,.invalid-Feedback.Feedback-icon {
    position: absolute;
    width: auto;
    bottom: 10px;
    right: 10px;
    margin-top: 0;
}

HTML

<div class="form-group position-relative">
     <label for="input2">Valid with icon</label>
     <input type="text" class="form-control is-valid" id="input2">
     <div class="valid-Feedback Feedback-icon">
          <i class="fa fa-check"></i>
     </div>
     <div class="invalid-Feedback Feedback-icon">
          <i class="fa fa-times"></i>
     </div>
</div>

Demo of input validation icons
Demo with working validation

.valid-Feedback.Feedback-icon,.invalid-Feedback.Feedback-icon {
    position: absolute;
    width: auto;
    bottom: 10px;
    right: 10px;
    margin-top: 0;
}

<!DOCTYPE html>
<html>
<head>
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="form-group position-relative">
     <label for="input2">Valid with icon</label>
     <input type="text" class="form-control is-valid" id="input2">
     <div class="valid-Feedback Feedback-icon">
          <i class="fa fa-check"></i>
     </div>
     <div class="invalid-Feedback Feedback-icon">
          <i class="fa fa-times"></i>
     </div>
   </div>
</div>

请注意,包含的form-group是position：relative.

原文链接：https://www.f2er.com/css/215118.html

css – Bootstrap 4表单输入,带有用于验证的图标

解决方法

猜你在找的CSS相关文章