remove bootstrap 5 validation right icon on select tag-CodePudding

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div >
    <label for="validationCustom04" >State</label>
    <select  id="validationCustom04" required>
      <option selected disabled value="">Choose</option>
      <option>option1</option>
    </select>
    <div >
      Please select a valid state.
    </div>
  </div>

How can we remove that right icon image on select tag (bootstrap 5.2)

CodePudding user response：

If its specifically for the select tag

add this CSS

.form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"], .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"] {
background-image: url("data:image/svg xml,") !important;
}