Question

我想达到这样的效果https://zapodaj.net/c0e251a5b8ff2.png.html我当前的代码看起来像这样 https://codepen.io/anon/pen/RQWvwJ所以我正在尝试输入

<div class="form-group has-warning" id="form-username">
   <label class="control-label" for="username">Your username</label>
   <input name="username" id="username" type="text" maxlength="36" class="form-control" />
</div>

添加一个类has-warning来更改颜色，但事实并非如此。我使用的是Bootstrap 4.0.0。

如何为输入字段设置边框？

Answer 1

您还需要在输入中添加form-control-warning：

<div class="form-group has-warning" id="form-username">
   <label class="control-label" for="username">Your username</label>
   <input name="username" id="username" type="text" maxlength="36" class="form-control form-control-warning" />
</div>

form-control-warning内has-warning .has-warning .form-control-warning的任何元素（即4.0-alpha6都是获得边框的内容。

仔细观察之后，实际上看起来他们在has-warning（引用4.0和was-validated的文档（这是一个文档）之间非常彻底地更改了表单验证内容在您的CodePen中。新文档可以在这里找到：Bootstrap 4 Form Validation。

看起来他们完全摆脱了“警告”状态。它现在有效或无效。然后，您必须在父元素上使用:valid，然后使用伪元素:invalid和required（基于HTML5 was-validated和其他内容），或者离开关闭is-invalid并直接将input添加到<div class="form-group" id="form-username"> <label class="control-label" for="username">Your username</label> <input name="username" id="username" type="text" maxlength="36" class="form-control is-invalid" /> </div>以获得红色边框。没有黄色。

.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid {
    border-color: #f0ad4e;
}

CodePen

如果你想只为边框上色，我建议你只使用CSS。如果你想真正做有效/无效的事情，我建议你采用我刚才提到的方法。如果你愿意的话，可以用这个颜色覆盖黄色的颜色：

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

CodePen

最后，虽然我不推荐它，但您也可以使用Bootstrap 4 Alpha版本：A。虽然，我会避免这种情况，因为你已经将自己锁定在已经过时的版本中使用更新的代码。

Bootstrap中输入的边框颜色

1 个答案: