'how can i change the default position of the option elements in html select form

I am customizing the default/normal behavior of the HTML select element and trying to adjust the HTML select options using CSS.

This is the initial HTML code:

<label class="block mt-4">
  <select class="form-select mt-1 block w-full border rounded-md border-gray-600 focus:border-gray-600">
    <option>$1,000</option>
    <option>$5,000</option>
    <option>$10,000</option>
    <option>$25,000</option>
  </select>
</label>

modified HTML code

<label class="block mt-4">
    <img src="/search.png" className='absolute mt-4 ml-3' alt="profile-pixs" />
  <select class="form-select mt-1 block w-full border rounded-md border-gray-600 focus:border-gray-600">
    <option>$1,000</option>
    <option>$5,000</option>
    <option>$10,000</option>
    <option>$25,000</option>
  </select>
</label>

This is a visual of the current state of the form

As seen in the image, the search icons due to the CSS position is overlaying the option values, I need a way to adjust the select options to the right, so there is no overlapping between the option value and the search icon.

htmlcssforms


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions