1

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

LVC
  • 51
  • 2
  • 7

2 Answers2

1

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

More help here.

Fahad Nadeem
  • 47
  • 7
1
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>
Jaswinder Kaur
  • 1,606
  • 4
  • 15