移除 Bootstrap 的验证图标答案

【问题标题】：Remove Bootstrap's validation icons移除 Bootstrap 的验证图标
【发布时间】：2019-07-04 11:48:42
【问题描述】：

说明

我正在尝试删除这些Bootstrap's validation 图标（“x”和“check”），但我已经查看了所有内容，但找不到它在哪里。

代码

你也可以在里面看到这个JSFiddle。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<form class="was-validated">
  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>
</form>

提前致谢，
路易斯。

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

我遇到了同样的问题，但输入字段为type=date。我必须添加padding-right: 0.75em; 以便日历图标具有与以前相同的填充并且不会奇怪地移动。

CSS：

/* remove validation icons */
.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none !important;
    border-color: #ced4da;
    padding-right: 0.75em;
}

.form-control.is-valid, .was-validated .form-control:valid {
    background-image: none !important;
    border-color: #ced4da;
    padding-right: 0.75em;
}

【讨论】：

【解决方案2】：

引导程序 4：

.form-control.is-valid,
.form-control.is-invalid {
    background-image: none;
    padding-right: inherit;
}

【讨论】：

【解决方案3】：

这行得通：

在simple_form_bootstrap.rb中删除此代码, error_class: 'is-invalid', valid_class: 'is-valid'

【讨论】：

【解决方案4】：

您可以通过将特定 CSS 类/伪类的 background 属性设置为 none 来简单地删除图标

.was-validated .custom-select:valid {
  background-image: none;
}


.was-validated .custom-select:invalid {
  background-image: none;
}

如果您想删除验证图标，但保留选择输入上的箭头图标，可以通过将background 设置为以下方式来实现

.was-validated .custom-select:invalid {
     background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
}

引导程序 4 的更新：

将特定选择器的背景图像设置为无保留背景颜色和下拉按钮。

.form-control.is-invalid{
    background-image: none;
}

使用 Bootstrap 的 SASS/SCSS 的更新：

请参考PCalouche的精彩回答！

【讨论】：

它在我的情况下不起作用，因为我需要 background 来显示。如果它消失了，它会显露出它背后的颜色。
抱歉，请问您指的是什么背景？它看起来怎样？我刚刚进行了编辑，这样箭头图标就不会消失了
我设法解决了您的答案并找到了我需要的东西。我所要做的就是设置background-image: none;，而不是所有的background。我会接受你的回答，因为你先回答了，但你能用上面的代码编辑它吗？

【解决方案5】：

如果你正在编译 BootStrap 的 SCSS，你可以在导入 bootstrap.scss 之前包含它：

$enable-validation-icons: false;

【讨论】：

你是怎么知道的？ :o
如果通过 npm 安装 boostrap，它包含一个 scss/_variables.scss 文件，其中包含许多您可以覆盖的内容。很高兴这有帮助。
这是禁用验证图标的最简单且正确的方法。只需将其删除即可启用。

【解决方案6】：

.custom-select.is-invalid, .was-validated .custom-select:valid,.custom-select.is-invalid, .was-validated .custom-select:invalid {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px,url("data:image/vg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") no-repeat center right 1.75rem/1.125rem 1.125rem !important;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<form class="was-validated">
  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>
</form>

JSFiddle

【讨论】：

它在我的情况下不起作用，因为我需要 background 来显示。如果它消失了，它会显露出它背后的颜色。
我没有删除刚刚更改的背景。请看更正。 @路易斯
由于您的回答与wentjun's 相似，因此我在他的回答中评论的内容同样适用于您的回答。由于我只能接受一个答案，我会支持你的答案，但你能用background-image: none;编辑你的代码吗？