[atg85Participant]

Hi X!

Quick question – just thought I’d probe your brains – my work is practically finished on http://ottawavapeshoppe.ca/shop/ – styled everything – but a small issue came up – see the dropdown list “Default sorting” on top right? Looks fine on desktop but when I open it on my iPhone there’s a greyish gradient in the background and it’s making my “gold” text hard to read – is there a way to remove that with custom CSS? Thank you!

[JadeModerator]

Hi there,

Please add this code:

@media (max-width: 480px) {
    .woocommerce-ordering select,
    .woocommerce-ordering select option {
        background: #2b3136 !important;
    }
}

Hope this helps.

[atg85Participant]

Hi Jade – it’s not working unfortunately – please check out the screenshot here

I’m trying to remove the grey from the mobile list and also on the desktop to make the Provinces dropdown list looking like the rest of my boxes…

[ChristopherModerator]

Hi there,

Would you please clear cache and check again?
I don’t see gradient background anymore.

Please add this code :

a.select2-choice.select2-default {
    background-color: transparent;
color: #fff;
}
div#select2-drop {
    background-color: transparent;
    color: #fff;
}

Thanks.

[atg85Participant]

Hi X! With a bit of fiddling and research I found a way!

/*Remove gradient mobile*/

 select {
      -webkit-appearance: none;  /*Removes default chrome and safari style*/
      -moz-appearance: none; /* Removes Default Firefox style*/
      background: url('http://ottawavapeshoppe.ca/wp-content/uploads/2016/07/chevrondown.svg') no-repeat;  /*Adds background-image*/
      background-position: 190px 10px!important;  /*Position of the background-image*/
      width: 215px!important; /*Width of select dropdown to give space for arrow image*/
      text-indent: 0.01px; /* Removes default arrow from firefox*/
      text-overflow: "";  /*Removes default arrow from firefox*/
}

[RadModerator]

Thanks for sharing!

[Author]

Posts