[Resolved] Padding in dropdown list

[Kevin]

Hi.
Is there a way to add padding to down arrow in select boxes?
There is padding specified but but padding is not applying to dropdown arrow.

Please see URL

down arrow is too close to the right side end of the box.

[Leo]

Hi there,

I gave it a shot but don’t think so unfortunately.

The style of dropdown box is mostly handled by the browser itself.

You can see that it looks different in Firefox vs Chrome.

[Kevin]

Thanks.

[David]

Hi there,

you could do something like this to disable the browser styles:

.woocommerce form .form-row select,
.woocommerce div.product form.cart .variations select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
}

The background image i got from here:

https://css-tricks.com/styling-a-select-like-its-2019/

which is a useful article to help style the select box.

[Author]

Posts