How to change arrow position in select tag?

Question

I faced a problem when styling the select tag. The thing is that by default, the arrow is in the right corner of the field, which takes the size of the largest option tag. That's why, when a small option is selected, everything looks not in a proper way. Is there any possibility to adjust the width of the select tag to the current option or somehow attach the arrow to it? Thanks in advance!

Show screen:

Code:

.module-table {
    min-width: 100%;
    margin-bottom: 30px;    
}
.module-status-dropdown {
    position: relative;
    padding: 0;
    margin: 0; 
    border: none; 
    background: transparent;
    margin-left: -4px;
}
option {
    padding: 0;
    background: transparent;
    color: #000;
}

<table class="module-table">
    <tr>
        ...
    </tr>
    ...

    <tr>
        ...
        <td>
            <select class="module-status-dropdown module-status-dropdown-rejected">
                <option value="rejected">Rejected</option>
                <option value="pending">Pending</option>
                <option value="approved">Approved</option>
            </select>
        </td>
        <td>
            <select class="module-status-dropdown">
                <option value="rejected">Waiting for payment</option>
                <option value="pending">Paid</option>
            </select>
        </td>
    </tr>
    ...
</table>

I tried applying the appearance: none property and adding an arrow using the after pseudo element, but nothing worked.

Answer 1

A slightly different option is to place the arrow to the left of the text to give the user a consistent experience, regardless of the text width.

This can be achieved by using the CSS direction property.

select {
  direction: rtl;
}

option {
  direction: ltr;
}

<select>
  <option value="rejected">Waiting for payment</option>
  <option value="pending">Paid</option>
</select>