Dropdowns on checkout page display bug.

Hello,

The dropdowns on the checkout page are displayed weirdly:

I am using the settings for the Electronics demo content and have tried removing all custom css to see if it fixes it, it didn’t.

Cheers,
Jayme

Hello,
Try to add the following code snippet to the Custom CSS area in Theme Settings.

.woocommerce-account .select2-container .select2-choice, 
.woocommerce-checkout .select2-container .select2-choice {
    height: auto;
    color: #444;
    border-radius: 0;
    background: transparent;
}

.woocommerce-account .select2-container .select2-choice:focus, 
.woocommerce-checkout .select2-container .select2-choice:focus {
	box-shadow:none;
}

body .select2-container .select2-choice .select2-arrow {
  background: transparent;
  border-left:none;
}

body .select2-container .select2-choice .select2-arrow b {
    background-position: -2px 8px;
}

body .select2-dropdown-open .select2-choice .select2-arrow b {
    background-position: -21px 8px;
}

Kind Regards
XTemos Studio

Hello,

With that CSS, the dropdowns display fine for a second and then are overwritten with the broken ones.

Cheers,
Jayme

Please, provide your admin access so we could check it.

sure thing.

Hello,

We can’t log in with this password, please double check it.

Kind Regards
XTemos Studio

sorry, must’ve not hit save or something.

Thanks. We have fixed a markup issue in your Custom CSS. Please, check now.

Sweet, fixed now. Thanks.

What was the issue?

It was caused by unnecessary } symbol after the code in Custom CSS 🙂

[Author]

Posts