How to rotate/spin 180' the caret from the dropdown ideally with just CSS?

Question

How can I rotate upside down (180') the caret from the dropdown menu when clicked, so that when clicking the dropdown it almost looks like an animation?

It would be great if that could be done without javascript and just CSS, but open to any suggestion.

 .select { font-family: 'Roboto'; font-size: 16px; font-weight: bold; color: red; background-color: white; border: thin solid red; border-radius: 8px; height: 45px; text-align: center; margin-right: 10px; resize: none; outline: none; cursor: pointer; }

 <div class="city_select_dropdown_container"> <div> <span style="color:white;font-size:12px">City</span> <form> <select class="select"> <option>Option 1 </option> <option>Option 2 </option> </select> </form> </div> </div>

I am trying to modify the CSS inside this div/form, but It does not let me.

Answer 1

or with smaller script

 $(document).on('click','.select',function(){ $(this).parent().toggleClass('focused'); })

 .select { font-family: 'Roboto'; font-size: 16px; width:100%; font-weight: bold; color: red; background-color: white; border: thin solid red; border-radius: 8px; line-height:45px; padding: 0 3em 0 1em; text-align: center; margin-right: 10px; resize: none; outline: none; cursor: pointer; -moz-appearance: none; -webkit-appearance: none; appearance: none; }.selector { position:relative; display:inline-block; }.selector::before { content:""; display:block; width:5px; height:5px; top:50%; border-right:2px solid black; border-bottom:2px solid black; transform:rotate(45deg); margin-top:-2.5px; position:absolute; right:1em; color:#000; z-index:2; }.selector.focused::before{ transform:rotate(0); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="city_select_dropdown_container"> <div> <span style="color:black;font-size:12px">City</span> <form> <div class="selector"> <select class="select"> <option>Option 1 </option> <option>Option 2 </option> </select> </div> </form> </div> </div>