How to fix select opening with css?

Question

css

Hello! I want to decorate select a little. I added rounding, but when the list is expanded, it does not look very good and therefore I wanted to remove the lower rounding when the list is expanded. I set :focus for disclosure, but what if the list is hidden by clicking on the select again? Then the focus doesn't disappear and the style stays with it. How can it be solved?

Answer 1

For those who inappropriately style the input field, there is a separate cauldron in hell, into which, in order to get into, you need to enter a phone number in the most inadequate input field through selects, in which data is generated randomly with each input.
In other cases, dropdown is used, which passes the value from the hidden input field. You can do whatever you want with it. With dropdown in a sense. Throw in some JS, catching states, and everything will be a bunch.