Select Styling borders

Hi everyone,

I am currently trying to customize the select form for filtering on my page.
Unfortunately the select dropdown looks different in every device/browsers.

I want to make the styling custom with custom code so every browser has the same style. Unfortuanetly, not every value works, so e.g. border-radius: 0px; or none; doesn’t apply and borders are still rounded. Other values, like box-shadow or background-image work.

select {
width: 100%;
min-width: 15ch;
max-width: 30ch;
font-size: 1.25rem;
line-height: 1.1;
background-color: #fff;
}

image

Anyone have any idea how to force the styling to the select?

Read Only: Webflow - Neu Casting

Hi @nik_meixner creating custom select require a bit more effort. more info in

Hey Stan,

thanks for the reply, but I have to ask you for more details.
I resetted the styling like in the tutorial, but it doesn’t change anything. As previously stated, some of the changes apply, while others don’t.

The reset is changing nothing for different browsers or devices. I didnt continue with styling the focus or custom arrows, after the first steps didn’t work.

I also analysed the different classes and ids that i have for the select form, inspected their styling and there border-radius is set to 0 but it doesn’t apply.

Also, while chaning font-size for options, it works absolutely fine on my Chrome Windows Desktop, but on my Chrome Macbook Browser, no changes apply at all.

Thanks & Best,
Nik

hi @nik_meixner I do not know why it is not working for you here is read-only simple example.

If you are interested in styling nav dropdown instead you can check this

1 Like

Thank you, I appreciate it.
Just to make sure: just the embed element, correct?