css issue

Hi @alx359,

Fluid Checkout applies some styles to the dropdown select fields in order to make it look more like the theme. By default, most themes do not apply the necessary styles for enhanced select fields, also know as select2.

It seems that you are applying some styles to make the fields more round at the corners than the theme originally applies.

The position for the validation check icon (green checkmark) will be fixed soon to match the height of the field with the original theme styles.

The dropdown fields in your website are using the enhanced select2 field type. They are defined as normal select fields, but the actual visible field is not the select HTML element, but a set of <span> elements added by the select2 component.

As you might now already, it is not recommended to use !important when not really needed.

You’ll need a CSS code similar to this below:

body.theme-flatsome div.woocommerce form .form-row span.select2-selection,
body.theme-flatsome div.woocommerce form .form-row span.select2-selection__rendered {
    border-radius: 15px;
}

The code above uses CSS selectors that are more specific than those used by Fluid Checkout:

body.theme-flatsome div.woocommerce form .form-row .select2-selection,
body.theme-flatsome div.woocommerce form .form-row .select2-selection__rendered {
    // Select2 field styles from Fluid Checkout
}

As for !important not working as expected, please note that CSS styles are based on the specificity of the CSS selectors used.

That means that if a set of styles have a higher value of specificity, they will be applied.

The !important directive is used to basically hijack the CSS specificity calculation and make that set of styles, well, more important.

Although, if the value for a CSS property (ie. border-radius) has the !important directive more than one time, the value used will be decided based on the specificity of the CSS selector used.

Best,
Diego

Thank you very much, Diego. I hear what you’re saying and you’re right.
As my child-theme styling has been working as intended with the Flatsome checkout since the beginning, I was fixated that you’re doing some JS magic that was messing up with the css in an unavoidable way. There’s still something fishy happening with the select fields, mind you, but your workaround helped me fix things the way I wanted.
Thanks again!

Hi @alx359,

Cool.

Notice that if you use the “Floating labels” feature from the Flatsome theme, the select2 component is disabled and normal select fields are used instead.

Best,
Diego

Thanks, Diego. I used their Floating labels feature until recently, but unfortunately it doesn’t support in-context search in the select fields which is a way more useful feature to have IMO, so I switched them off until Flatsome may fix them eventually.

Hi @alx359,

Exactly.

If you are interested in using a similar feature to the floating labels, please contact me through our support channel at:
https://support.fluidcheckout.com/portal/en/newticket

Best,
Diego

Thanks for your kind offer, Diego. Will do!