Remove Bootstrap's validation icons

Question

Explanation

I'm trying to remove these Bootstrap's validation icons ("x" and "check"), but I've look into everything and can't find where it is.

Code

You can also see in it this 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>

Thanks in advance,
Luiz.

Answer 1

If you are compiling BootStrap's SCSS you can include this before you import bootstrap.scss:

$enable-validation-icons: false;

Answer 2

You can simply remove the icon by by setting the background property to none for that specific CSS class/pseudo-class

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


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

If you would like to remove the validation icons, but retain the arrow icons on the select input, it can be achieved by setting the background to the following

.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;
}

Update for bootstrap 4:

Setting the background image to none for the particular selector retained the background color and the dropdown button.

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

Update for those working with Bootstrap's SASS/SCSS:

Please refer to PCalouche's excellent answer!

Answer 3

I had the same problem but for input fields with type=date. I had to add padding-right: 0.75em; so that the calender icon has the same padding as before and does not oddly move.

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

Answer 4

Bootstrap 4:

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