SELECT OPTION styling works somewhat on Windows but 0 on macOS

HTML & CSS
1

I tried some basic styling for using CSS in an OPTION which seems good on Windows but on macOS its still the default browser/OS one.

Windows :

image
image1000×430 34.7 KB

macOS :

image
image999×430 51.8 KB

#progam {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-family: 'Salsa', sans-serif;
    outline: 0;
    box-shadow: none;
    font-size: 25px;
    line-height: 30px;
    padding: 10px 30px 14px 30px;
    background: transparent;
    color: var(--primary-color2);
    margin-bottom: 31px;
}

#progam option
{
    font-family: 'Salsa', sans-serif;
    font-size: 20px;
    color: var(--primary-color2);
}
2

Styling the original select is never a good idea as it was never intended to be. Same as checkbox and radio buttons. This is done to give the user on all applications the same, for their operating system designed, feeling.

If you really want to change the style of a select you should use some additional lib like select2 or similar.

But I would recommend to think about if it’s really a good idea to not use the standard look and feel.

1 Like