Question

1）form input元素的边框颜色不会更改为相关的颜色，例如绿色，橙色或红色。

2）它不会在输入的正确位置插入诸如“ ok”或“ x” gif之类的相关gif。

我期望表单控制成功，表单控制警告或表单控制危险会起作用，但没有成功。为什么？

<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>

编辑：

这解决了我的问题。[link] [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

与表单控件类相关的类在引导程序4中无法正常运行

1 个答案: