'how to adjust the position of arrow down icon of the select element?

I can't adjust the position of the drop-down arrow icon in the select element of HTML, I want to adjust the icon so it's not that close to the right

an image is attached below. image

htmlcssandroidsql


Solution 1:[1]

You cant move/style the arrow in select statement. You can remove the arrow by using style appearance: none;

More help here.

Solution 2:[2]

In this example, I am hiding the default arrow and displaying my own arrow.      

  <div class="abc">
        <select>
        <option value="a" selected="">a</option>
        <option value="b">b</option>
        </select>
        </div>
    
    <style>
        select{
            appearance: textfield;
            -webkit-appearance: textfield;
        }
        .abc {
            position: relative;
        }
        .abc:after {
            content: "";
            background: #ffffff;
            right: 10px;
            width: 24px;
            height: 23px;
            position: absolute;
            z-index: 999;
            background-image: url(arrow image path);
            background-size: contain;
            background-repeat: no-repeat;
            top: 11px;
        }
    </style>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fahad Nadeem
Solution 2

Related Questions