I'm having trouble customizing my dropdown fields in wix forms

Ask the community
1

I’m having trouble customizing my dropdown fields in wix forms

2

What issues? Can you explain what you’re trying to achieve vs what you’ve got so far

3

Oh thank you,
I already created the form but i added two dropdown fields as part of the form fields so now on the editor i already customized the fileds background, border color and width and also radius but the dropdpwn option is what i’m unable to customize to also have radius and background of my choice.

Hope you understand and please ask question if i’m not clear enough

Thanks

4

Currently the forms don’t have settings to customize the dropdown for the background nor radius but using the teaching from this thread, you can customize the dropdown using CSS with combinators.

For the background color of the dropdown you can use this where you name the section with the form form-section

.form-section [data-hook="popover-content"] div{
background-color: khaki !important;
}

The border radius for only the dropdown is a bit trickier and I couldn’t figure out a good way to target just that since it seems to get an custom class automatically assigned by Wix to the form and its dropdown. However, you can target all containers and adjust the borders to your preference. I think calc(6*1px) was what I saw was the default radius for input elements but again, feel free to adjust.

Note, I didn’t like how a dropdown looked with borders at the top so I only used the bottom but I included the code to have it across all four corners commented out:

.form-section div {
 border-bottom-left-radius: calc(6*1px) !important;
 border-bottom-right-radius: calc(6*1px) !important;
/*border-radius: calc(6px) !important; *//*if you want borders radius across all four corners*/        
}

And here’s a link so you can see it in action.

1 Like
5

Appreciate you for this Rob, It worked!

2 Likes
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.