Question

说明

我正在尝试删除这些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>

先谢谢了，
路易斯。

Answer 1

如果您正在编译BootStrap的SCSS，则可以在导入bootstrap.scss之前包括以下内容：

$ enable-validation-icons：false;

Answer 2

您可以通过将特定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;
}

Answer 3

引导程序4：

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

Answer 4

.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

Answer 5

这有效：

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

Answer 6

我有同样的问题，但输入字段为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;
}

删除Bootstrap的验证图标

说明

代码

6 个答案: