Javascript 移除引导程序'；s验证图标 解释

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

代码 你也可以从中看到这一点

打开此选择菜单
一个
两个
三
示例无效的自定义选择反馈

您只需将特定CSS类/伪类的

background

属性设置为

none

即可删除图标

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


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

如果要删除验证图标，但保留选择输入上的箭头图标，可以通过将

背景设置为以下值来实现：

.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的人员更新：

请参考您的精彩答案
 
.custom-select.is-invalid、.was已验证。custom-select:valid、.custom-select.is-invalid、.was已验证。custom-select:invalid{
背景：url（“数据：image/svg+xml，%3csvg xmlns=”http://www.w3.org/2000/svg'viewBox='0 0 4 5'%3e%3path fill='23343a40'd='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e'）无重复右键。75rem中心/8px 10px，url(“数据：image/vg+xml，%3csvg xmlns=”http://www.w3.org/2000/svg'viewBox='0 8 8'%3e%3c路径填充='%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.6c-.43.5-.8.4-1.1z'/%3e%3c/svg%3e'）没有重复的中右1.75rem/1.125rem 1.125rem！重要；
}

打开此选择菜单
一个
两个
三
示例无效的自定义选择反馈
如果您正在编译BootStrap的SCS，您可以在导入BootStrap.scs之前包含以下内容：

$enable-validation-icons: false;

这是有效的：

删除此代码
，错误\u类：'is invalid'，有效\u类：'is valid'
在
simple\u form\u bootstrap.rb
bootstrap 4:


.form-control.is-valid，
.form-control.is-invalid{
背景图像：无；
填充权：继承；
}
我也遇到了同样的问题，但对于输入字段
type=date
。我必须添加
右侧填充：0.75em；
，以便日历图标具有与以前相同的填充，并且不会奇怪地移动

CSS:

在我的情况下，它不起作用，因为我需要显示
背景。如果它消失了，它将显示它背后的颜色。对不起，我可以知道你指的是什么背景吗？它看起来怎么样？我刚刚进行了编辑，这样箭头图标就不会消失。我设法处理你的答案，找到我需要的。好吗我必须做的是设置
背景图像：无；
，而不是所有的
背景。我会接受你的答案，因为你先回答了，但你能用上面的代码编辑它吗？在我的情况下，它不起作用，因为我需要显示
背景。如果它消失，它将显示它背后的颜色。我没有重新设置移动了刚刚更改的背景。请查看更正。@LuizAs您的答案与类似，我在他的答案中的评论同样适用于您的答案。由于我只能接受一个答案，我将对您的答案进行投票，但您能否使用
背景图像编辑您的代码：无；
？您是如何知道的？：oIf通过npm it安装boostrap包括一个scss/_variables.scss文件，其中包含许多可以覆盖的内容。很高兴这有帮助。这是禁用验证图标的最简单和正确的方法。只需将其删除即可启用。
/* 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;
}