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

Question

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

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

score 2 · Accepted Answer · edited Jun 17 '22 at 12:56

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>

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

1 Answers1