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.

Not with a `select`. You'll need to use a third-party drop down which draws this in its own div with an icon (image or sprite) — freedomn-m, Jan 18 '21 at 09:02
Thanks, with Javascript will there be way to do that by keeping the select ? (The reason of keeping select being is that I am going to link those select into my django apps forms and models)? — Pro Girl, Jan 18 '21 at 09:10
No idea about django, but many third-party dropdowns work by converting/hiding an underlying `select` - so...probably. — freedomn-m, Jan 18 '21 at 09:15
might this will help you https://stackoverflow.com/questions/4142619/how-to-make-select-element-be-transparent-in-chrome/ — Asturion, Jan 18 '21 at 10:01
@Asturion, this is a good partial solution, however you can not change onclick the image. — Pro Girl, Jan 18 '21 at 10:25
@SkylerX what for yo need click event? you can make css for focused state using :focus selector — Asturion, Jan 18 '21 at 13:10
@Asturion, so that when you click it back it will spin back to its original position, or if you click something else, however I think, that there is no way of doing it without Javascript or Jquery. — Pro Girl, Jan 18 '21 at 13:32
@SkylerX if you need events support then it is better to use third party plugins/ but anyway you can style it with simple css selectors :hover :focus etc. — Asturion, Jan 18 '21 at 13:50

score 1 · Accepted Answer · answered Jan 18 '21 at 14:30

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>

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

1 Answers1