Search code examples
cssgoogle-chromewebkit

CSS: -webkit-appearance: menulist Dropdown (Select tag), how to give padding to the arrow?

I have this html for a select tag:

<div>
   <label> Country </label> 
   <span>
      <select>
         <option value=""></option>
         ...
      </select>
   </span>
</div>

it's relevant CSS is this:

select {
    -webkit-appearance: menulist;
}
label {
    margin-left: 1rem;
}

And here is what it looks like:

country dropdown

See how the dropdown arrow has no space with the right border of the select element?

That's what I'm trying to style.

So is there a CSS selector that can help me do this? Or should I just go ahead and customize it all the way using content: "someglyph"?

Thanks in advance

Solution

  • The best way to solve this is to apply this little CSS:

    select {
      appearance: none;
      background-color: transparent;
      background-image: url(arrow.svg);
      background-repeat: no-repeat;
      background-position: right;
      background-size: 30px;
}

    and as @mazoli mentioned, this solution is cross browser.