如何仅使用 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>