how change right padding of select tag using tailwindcss-CodePudding

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

what i expected is like the picture below

here my code

<select >
    <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 >
    <option selected>Choose City</option>
    <option>Jakarta</option>
    <option>Depok</option>
    <option>Surabaya</option>
</select>

does anyone have a solution ?

CodePudding user response：

:: 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 >
<select >
<option selected>Choose City</option>
<option>Jakarta</option>
<option>Depok</option>
<option>Surabaya</option>
</select>
</div>

CodePudding user response：

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.