Is it possible to add a before element in selection box?

I’m trying to add an SVG image before the select input box. Here is the code

<select class="rankings_selection" name="" id="">
    <option value="">Last 7 days</option>
    <option value="">Last 3 days</option>
</select>

This is what I’m trying to achieve

This is what I'm trying to achieve

>Solution :

I think you should try styles for custom select

.custom_select {
  display: inline-flex;
  border: 1px solid black;
  border-radius: 8px;
  overflow: hidden;
  padding: 4px;
}

.rankings_selection {
  border: none;
  outline: none;
  padding: 0;
}
<div class="custom_select">
  <img src='https://picsum.photos/24/24' />
  <select class="rankings_selection" name="" id="">
    <option value="">Last 7 days</option>
    <option value="">Last 3 days</option>
  </select>
  <div>

Leave a Reply