customizing bootstrap form-control on select option

Question

I'm using bootstrap's form-control class to keep a consistent style between my form input and those that requires a select option. However using bootstrap's form-control on select elements gives it the ugly drop-down button in firefox.

What I'd like to achieve is this

However looking through the css part I have no way of identifying which part it is that I should override as there does not seem to be a css specifying the drop-down arrow's decoration.

This is how the current code looks like

<div class="form-group row">
    <label for="industry" class="">Industry :</label>
    <select name="industry" class="form-control">
        <option value="" disabled selected>Select Industry</option>
        <option value="financial-service">Financial Services</option>
        <option value="healthcare-lifescience">Healthcare & Life Science</option>
        <option value="communications">Communications</option>
    </select>
</div>

Answer 1

You can implement Chosen(jQuery plugin for select) in it. It has lots of features on it and also you can design it easily.

Link: https://harvesthq.github.io/chosen/

In your code :

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css"
  />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
  <div class="form-group">
    <label for="industry" class="">Industry :</label>
    <select name="industry" id="industry" class="form-control chosen-select">
      <option value="" disabled selected>Select Industry</option>
      <option value="financial-service">Financial Services</option>
      <option value="healthcare-lifescience">Healthcare & Life Science</option>
      <option value="communications">Communications</option>
    </select>
  </div>
  <script>
    $("#industry").chosen();
  </script>