CODEWITHSUNDEEP
htmlcsstailwind-css
Muhammad Hakim
Muhammad Hakim

Reputation: 57

how change right padding of select tag using tailwindcss

i want to change x padding of select tag, but the right padding not change. like the picture below

enter image description here

what i expected is like the picture below

enter image description here

here my code

<select class="border border-black/20 rounded-md px-3 py-2">
    <option selected>Choose City</option>
    <option>Jakarta</option>
    <option>Depok</option>
    <option>Surabaya</option>
</select>

i have using ::after but the content not showing. here the code

<select class="border border-black/20 rounded-md px-3 py-2 appearance-none after:content-['▾'] after:text-black after:block">
    <option selected>Choose City</option>
    <option>Jakarta</option>
    <option>Depok</option>
    <option>Surabaya</option>
</select>

does anyone have a solution ?

Upvotes: 0

Views: 2349

Answers (2)

Vinod Kushwah
Vinod Kushwah

Reputation: 36

:: after does not work in select elements, so you must add a parent DIV tag and apply the CSS to that div tag.

Here is the code you can see.

<div class="border overflow-hidden flex items-center border-black/20 rounded-md 
block relative after::content-['\25BC'] after::absolute after::right-3 
after::pointer-events-none">
<select class="appearance-none w-full pl-3 py-2 pr-9">
<option selected>Choose City</option>
<option>Jakarta</option>
<option>Depok</option>
<option>Surabaya</option>
</select>
</div>

Upvotes: 1

Phil
Phil

Reputation: 371

This seems like a width-issue. Your padding is applied, but the dynamic width of your element doesn't change. So there is a padding, but you have to extend the width of the whole object.

Also the chevron is an ::after object and you will have to move it left with some padding to achieve the look you want.

Upvotes: 0

Related Questions