html - 与表单控件类相关的类在 bootstrap 4 中无法正常运行

Question

1) form input 元素的边框颜色不会更改为绿色、橙色或红色等相关颜色。

2) 它不会在输入的正确位置插入相关的 gif，如“ok”或“x”gif。

我期望 form-control-success 或 form-control-warning 或 form-control-danger 会起作用，但它没有。为什么？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
  <label class="form-control-label text-success" for="inputSuccess2">
            Success
        </label>
  <input type="text" class="form-control form-control-success" id="inputSuccess2" aria-describedby="inputSuccess2Status">
</div>
<div class="form-group">
  <label class="form-control-label text-warning" for="inputWarning2">
            With Warning
        </label>
  <input type="text" class="form-control form-control-warning" id="inputWarning2" aria-describedby="inputWarning2Status">
</div>
<div class="form-group">
  <label class="form-control-label text-danger" for="inputError2">With Error</label>
  <input type="text" class="form-control form-control-danger" id="inputError2" aria-describedby="inputError2Status">
</div>

编辑:

这解决了我的问题。[链接][1]

[1]: Bootstrap 4 form input with icon for validation 强文本

Answer 1

1) Bootstrap 4中没有指定.form-control-success, .form-control-danger等类，你可以自己添加样式表，例如:

.form-control.form-control-success:focus{
   border-color: #28a745;
   box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

2) 要在输入中插入 gif，您需要进一步自定义 html/css/js。从这里开始:https://getbootstrap.com/docs/4.3/components/input-group/#custom-forms