CODEWITHSUNDEEP
htmlcssforms
oyerohabib
oyerohabib

Reputation: 395

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.

Upvotes: 0

Views: 269

Answers (1)

Encompass
Encompass

Reputation: 592

I would recommend adding padding on the left and using the image as a background You can also do it with a ":before" or ":after" and absolute positioning depending on what you need. (Just remember if you want to use the before/after it will need to be on a span that wraps that select, you can't use the select itself.)

select {
  padding-left: 20px;
  background-image:url(https://via.placeholder.com/15);
  background-repeat: no-repeat;
  background-position: 5px 50%;
}

Image of the working layout from jsfiddle.

https://jsfiddle.net/vntepd9j/11/

I like using the background option. and don't forget you can have more that one image as the background and position them. It comes in handy when you want to apply animation and other effects or have a custom Chevron and image.

Upvotes: 1

Related Questions