Remove Bootstrap's validation icons
If you are compiling BootStrap's SCSS you can include this before you import bootstrap.scss:
$enable-validation-icons: false;
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!