I want to add background image or image in select list using css and html [duplicate]

Question

I want to add background picture for options in select list on all browsers. CSS styling only working on chrome.

    <style>
       .label-sm option{
           font-size:16px;color:black;background: url('url');
     }
    </style>

Here is HTML:

    <div class="col-sm-3 col-5">
      <label class="d-block label-sm" for="wrt">Wrt: <span data-tooltip="Derivative with respect to">&#128712;</span></label>
      <select id="wrt" name="wrt" class="form-control">
        <option selected value="x">x</option>
        <option value="y">y</option>
        <option value="z">z</option>
        <option value="u">u</option>
        <option value="v">v</option>
        <option value="t">t</option>
        <option value="w">w</option>
        <option value="θ">θ</option>
      </select>
    </div>

Answer 1

as mentioned in the answer here, CSS background-image issue for <select> & <option> "each browser has it's own way to render and create those elements. Some browsers will accept having a background image inside your select, others won't." you can try using custom selects and options, many libraries provide this,