How to disable function triggering when clicking outside select'a?

Question

css

Hello, I need help. I seem to have climbed into some jungle, but I want to figure it out.

https://jsitor.com/KiJLwEGPtz

When the select is clicked, the function to rotate the arrow is executed, but if you click outside the select, the arrow remains in the rotated state, and the select closes accordingly.

Which of the options is easier to implement, and is it possible?
1) Returning the arrow to its original position if clicked outside the select;
2) Prevent select from closing if there was a click outside of it.

Answer 1

Like this

Answer 2

Hint:
* border-radius
* https://css-tricks.com/snippets/css/css-triangle/ + content: ""
Implement it yourself

Answer 3

Solution
1) It's possible. Google how to catch a click outside the element, there is nothing complicated
2) Since this is a native select, I'm not sure if this is even possible
. In your case, you just need to synchronize the state of the arrow and the select. You can subscribe to blur (closing) & focus (opening) events. And set the desired state of the arrow