Select Styling borders

Design help Layout & Design
1

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

unnamed
unnamed874×542 244 KB

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

Read Only: https://preview.webflow.com/preview/playground-f2831f?utm_medium=preview_link&utm_source=designer&utm_content=playground-f2831f&preview=e50dc94e2901ca9d3ef85196784572a4&workflow=preview

2

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

3

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

4

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
5

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