title: How to set CSS for select and its dropdown menu when selected?
body: <p>I'm a backend developer, learning frontend, new to CSS.</p>
  
  <p>Working on a project, have to set a default CSS for <code>select</code> tag. However on click over this tag border color is getting changed to blue from green and text color to black from green. Tried to find out CSS implementing on click however no use. All that is visible on inspect element is some event is active on <code>select</code>. Tried to add my own event on click and change CSS back, however not able to achieve it so.</p>
  
  <p>CSS: </p>
  
  <pre><code>.customSelect {
      border-radius: 1.25rem;
      height: calc(5.25rem + 2px);
      font-size: 3rem;
      color: #00a082;
      border: 3px solid #cbece5;
  }
  </code></pre>
  
  <p>Tried to add same class on custom click event, however something else is replacing my CSS.</p>
  
  <p>JS:</p>
  
  <pre><code>$("#selectId").click( () =&gt; {
      $("#selectId").addClass('customSelect');
  });
  </code></pre>
  
  <p>How to add custom CSS on <code>select</code> tag and also on its <code>option</code> drop-down menu?</p>
  
  <p><strong>EDIT</strong> Why not a duplicate for <a href="https://stackoverflow.com/questions/7208786/https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select">how-to-style-the-option-of-a-html-select</a></p>
  
  <p>My question is not to style <code>option</code> tag, but to stop my <code>select</code> box from changing border color to blue like when we click on <code>select</code> or in <code>input</code> tag and by default these changes to blue. Like comment, question title, question body and answer box all changes border color to blue when clicked. I don't want that to happen.   </p>