I want to show the arrow in my selected box to rotate 180 deg, when I click

Asked Jan 17 '19 at 19:21

Active Jan 17 '19 at 19:47

Viewed 182 times

select:required:invalid {
  color: gray !important;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

.form-select-cutom {
  height: 40px;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  margin-bottom: 1em;
}

.form-select-custom:before {
  content: ""url(../images/arrow-down-sign-to-navigate.png)"";
  padding: 12px 8px;
  position: absolute;
  right: 10px;
  top: 0;
  z-index: 1;
  text-align: center;
  width: 10%;
  height: 100%;
  pointer-events: none;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">


<div class="form-group form-select-custom">
  <select class="form-control" id="select1">
    <option value="" disabled selected>Salutation</option>
    <option>Mr</option>
    <option>Mrs</option>
  </select>
</div>

I want to rotate the arrow 180 deg when I click on the select box and again rotate back when I click for the second time.I tried with jquery and also with css. It's not working perfectly. Can some one please help me with this issue. Thank You.

asked Jan 17 '19 at 19:21

Shaswati Bhattacharyya

You cannot use pseudo elements on select elements. Check out this answer for a similar question: https://stackoverflow.com/a/25574218/1172189 – disinfor Jan 17 '19 at 19:25
2

@disinfor the pseudo element isn't on the select – Temani Afif Jan 17 '19 at 19:27
@temani afif what do I do, to make it rotate. – Shaswati Bhattacharyya Jan 17 '19 at 19:30
You will need some JS here, listen to the click event and adjust the css based on that – Temani Afif Jan 17 '19 at 19:31
@TemaniAfif yep! In my haste I read the markup wrong :X – disinfor Jan 17 '19 at 20:57

I want to show the arrow in my selected box to rotate 180 deg, when I click

0 Answers0