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

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

CodePudding user response：

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

More help here.

CodePudding user response：

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

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