CODEWITHSUNDEEP
csswoocommercejquery-select2
PapT
PapT

Reputation: 623

How do I style the Woocommerce checkout select option?

I'm trying to change the style of the select (dropdown) field in my Woocommerce checkout page. I'm using it with the DIVI theme.

by default the select field does not have the same height as the other:

enter image description here

I managed to find the part to do that in the css by playing with the padding on this class:

.woocommerce-input-wrapper .select2-container--default .select2-selection--single

but then the select option and the arrow are not in the middle:

enter image description here

I can move the content of the field if I decrease the line-height here:

.select2-container--default .select2-selection--single .select2-selection__rendered

but if I decrease it too much, the text will be cut off

enter image description here

How can I move the content of the field to the middle properly? Thanks

Upvotes: 3

Views: 1636

Answers (1)

melvin
melvin

Reputation: 2621

Try this. Change the 40px in the below code to your desired value. Tested and working in windows, google chrome.

.select2-container .select2-selection--single{
    height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 40px !important;
}

Upvotes: 2

Related Questions