SELECT OPTION styling works somewhat on Windows but 0 on macOS

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 :

macOS :

#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);

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