As a backend developer delving into frontend development and navigating the complexities of CSS, I find myself facing a challenge. In my current project, I need to establish a default CSS for the select tag. However, upon clicking on this tag, the border color changes from green to blue, and the text color shifts from green to black. Despite my efforts to uncover the CSS responsible for this behavior, all I can see in the inspect element tool is that some event is triggering on the select. I attempted to create my own click event to revert the CSS changes, but unfortunately, I have been unsuccessful.
The defined CSS is as follows:
.customSelect {
border-radius: 1.25rem;
height: calc(5.25rem + 2px);
font-size: 3rem;
color: #00a082;
border: 3px solid #cbece5;
}
Despite assigning the same class on a custom click event, it appears that another CSS rule is overriding mine.
My JavaScript code:
$("#selectId").click(() => {
$("#selectId").addClass('customSelect');
});
How can I apply custom CSS to not only the select tag but also its option drop-down menu?
EDIT: This query is distinct from how-to-style-the-option-of-a-html-select.
My concern isn't about styling the option tag, but rather preventing the border color of the select box from changing to blue upon clicking – similar to how the input tag behaves by default. When clicking on elements like comments, question titles, bodies, or answer boxes, the border color switches to blue, which I want to avoid in the case of my select box.