0

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

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Vivek Nath R
  • 171
  • 1
  • 4
  • 11
  • hope this helps you [select](https://stackoverflow.com/questions/3532649/problem-with-select-and-after-with-css-in-webkit) – Amr yasser Jun 17 '22 at 12:38

1 Answers1

2

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>
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
kerm
  • 653
  • 1
  • 5
  • 15