Html Question posted in
Some basic documentation can be found here.

Html – How to change arrow position in select tag?

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

<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>

.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;
}

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

Tags:

2

Answers


  1. 0

    You can achieve it by using -webkit-apperarance and the background-image property:

    <select>
    <option selected>Option 1</option>
    <option disabled>Option 2</option>
    <option>Option 3</option>       
</select>

    select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url('https://i.imgur.com/lqNaWae.png');
    background-repeat: no-repeat;
    background-position: right;
    border: 1px solid #AAA;
    padding: 4px;
    -webkit-padding-end: 30px;
}

    Workaround for padding in the dropdown image:
    As far as I searched, I didn’t find any straightforward solution to provide some space to make the custom arrow icon padded, but I found a workaround for the same, that is using background-position-x to move it away from edges. Here is an implementation:

    select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url('https://i.imgur.com/lqNaWae.png');
    background-repeat: no-repeat;
    background-position: right;
    border: 1px solid #AAA;
    padding: 6px;
    background-position-x: 90%
    -webkit-padding-end: 20px;
}

    View:

    enter image description here

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search