Is there any alternative for select which i can use to i want to trigger on change function thats why i want select

I want a select dropdown like this i want the options to have some bigger width and select should only show the symbol and as well change the baackground color on hover i re search and get to know that we cant give style to option 🤦‍♀️ its very sad to know but luckily i got this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select here they showed what i wanted at least most of except the selected symbol show only anyway what i am getting also cool

.select-selected {
  background-color: DodgerBlue;
}

They are targeting a class selected select i look on the html but i cant find it but the color is changing perfectly they reason i cant copy it exactly i am using react styled component i need to understand and write a easy solution for this that link tutorial is so difficult anyone can explain or suggest me alternative of select

Note I am using react style component

export const NavbarSelect = styled.select`
    border: none;
    border-radius: 0px;

    option{
        background: #FFF;
        width:114px;
        height:45px;
    }
`

i want to style the option here

You can't style all parts of the standard HTML select list box.

Is it crucial to have the classic HTML select element underlying?

If not, you could easily create your own ul. In react, you have to show the custom ul on click on the actual selected option (e. g. an input-like field). When clicked on an option, just set this option for your component and pass it to your form component.