如何僅使用 CSS 從下拉列表中旋轉/旋轉 180' 插入符號？

Question

單擊時如何從下拉菜單中將插入符號倒置（180'），以便單擊下拉菜單時它幾乎看起來像 animation？

如果可以在沒有 javascript 和 CSS 的情況下完成，那就太好了，但歡迎任何建議。

 .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>

我正在嘗試修改此 div/form 中的 CSS，但它不允許我這樣做。

Answer 1

或使用較小的腳本

 $(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>