How to delete icon in bootstrap

The implementation method of bootstrap deleting icons: first open the corresponding code file; then simply delete the icon by setting the background property of a specific CSS class or pseudo-class to none.

The operating environment of this tutorial: Windows 7 system, bootsrap version 3.3.7. This method is suitable for all brands of computers.

Recommended: "bootstrap tutorial" "css video tutorial"

Delete Bootstrap's verification icon

Specific question:

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

You can also see this JSFiddle there.

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

How to implement:

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

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

If you want to remove the validation icon but keep the arrow icon on the select input, you can achieve this 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;
}

For more programming related knowledge, please visit: Programming Teaching! !

The above is the detailed content of How to delete icon in bootstrap. For more information, please follow other related articles on the PHP Chinese website!