[Resolved] Padding in dropdown list

Home Forums Support Padding in dropdown list

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1319654
    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.

    arrow

    #1319706
    Leo
    Staff
    Customer Support

    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.

    #1322005
    Kevin

    Thanks.

    #1322023
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.