Home Pure CSS solution to change the chevron of dropdown options on a click event?

Questions

Pure CSS solution to change the chevron of dropdown options on a click event?

June 29, 2023

Is there a pure CSS solution to change the chevron of dropdown options using a combination of CSS pseudo-elements and animations on a click event?

I tried the following approach:

body {
  background: #000;
}

#sec_opt select {
  /* Reset */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  cursor: pointer;
  position: absolute;
  right: 11px;
  width: 7px;
  border: 6px solid transparent;
  background: url(https://hueu.net/CMF/svg/chevron.svg) no-repeat;
  background-position: 87px;
}

#sec_opt select:hover {
  background: url(https://hueu.net/CMF/svg/chevronHover.svg) no-repeat;
  background-position: 87px;
}

#sec_opt select:focus {
  position: absolute;
  content: "";
  right: 11px;
  border: 6px solid transparent;
}

#authorWrap select,
#fieldWrap select {
  background-position: 180px;
}

#sec_opt select option {
  color: inherit;
}

#sec_opt select:focus {
  outline: none;
}

#sec_opt select::-ms-expand {
  display: none;
}

#sec_opt select option {
  background: #323232;
  border: none;
  outline: none;
}

select {
  appearance: none;
  /* Remove default styling */
  outline: none;
  /* Remove the outline */
  background-color: transparent;
  /* Set a transparent background */
  /* Add any additional styling you want for the dropdown */
}

select option {
  border-color: transparent;
  /* Set the border color to transparent */
}

#sec_opt select option:focus {
  background: #3e3e3e;
}

#sec_opt select {
  color: #ffffff;
  padding: 0px 16px;
  cursor: pointer;
  user-select: none;
  width: 100%;
  padding-right: 0px;
  padding-left: 0px !important;
  margin-top: 0px;
  z-index: 3;
  padding-bottom: 8px;
  left: -3px;
}

<section id="sec_opt">
  <div class="innerWrap">
    <div class="selectWrap year">
      <div class="custom-select" id="yearWrap">
        <label for="year">Year</label>
        <select>
          <option selected value="0">All</option>
          <option value="1">option1</option>
          <option value="2">option2</option>
          <option value="3">option3</option>
        </select>
      </div>
    </div>
  </div>
</section>

~~…which works well with hover, but I’d need the same with an onClick.~~

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel

My problem with the JavaScript solution is that the markup is changed.

I’d wish to eliminate JavaScript as possible. Can be, but without manipulating the markup.

There’s also this solution, but I don’t know how to implement it to my case.

The :focus made it work. Thank you all!!

I’ve updated my code, to make it work.

>Solution :

Instead of :hover, you can use :focus

And when it loses focus it will switch back to the default background.

let sec_opt = document.querySelector("#sec_opt select");

sec_opt.addEventListener("click",(e) => {
  sec_opt.classList.toggle("active")
});

body {
  background: #000;
}

#sec_opt select {
  /* Reset */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  cursor: pointer;
  position: absolute;
  right: 11px;
  width: 7px;
  border: 6px solid transparent;
  background: url(https://hueu.net/CMF/svg/chevron.svg) no-repeat;
  background-position: 87px;
}


#sec_opt .active{
  background: url(https://hueu.net/CMF/svg/chevronHover.svg) no-repeat;
  background-position: 87px;
}


#sec_opt select:hover {
  position: absolute;
  content: "";
  right: 11px;
  border: 6px solid transparent;
}

#authorWrap select,
#fieldWrap select {
  background-position: 180px;
}

#sec_opt select option {
  color: inherit;
}

#sec_opt select:focus {
  outline: none;
}

#sec_opt select::-ms-expand {
  display: none;
}

#sec_opt select option {
  background: #323232;
  border: none;
  outline: none;
}

select {
  appearance: none;
  /* Remove default styling */
  outline: none;
  /* Remove the outline */
  background-color: transparent;
  /* Set a transparent background */
  /* Add any additional styling you want for the dropdown */
}

select option {
  border-color: transparent;
  /* Set the border color to transparent */
}

#sec_opt select option:hover {
  background: #3e3e3e;
}

#sec_opt select {
  color: #ffffff;
  padding: 0px 16px;
  cursor: pointer;
  user-select: none;
  width: 100%;
  padding-right: 0px;
  padding-left: 0px !important;
  margin-top: 0px;
  z-index: 3;
  padding-bottom: 8px;
  left: -3px;
}

<section id="sec_opt">
  <div class="innerWrap">
    <div class="selectWrap year">
      <div class="custom-select" id="yearWrap">
        <label for="year">Year</label>
        <select>
          <option selected value="0">All</option>
          <option value="1">option1</option>
          <option value="2">option2</option>
          <option value="3">option3</option>
        </select>
      </div>
    </div>
  </div>
</section>

body {
  background: #000;
}

#sec_opt select {
  /* Reset */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  cursor: pointer;
  position: absolute;
  right: 11px;
  width: 7px;
  border: 6px solid transparent;
  background: url(https://hueu.net/CMF/svg/chevron.svg) no-repeat;
  background-position: 87px;
}

#sec_opt select:focus {
  background: url(https://hueu.net/CMF/svg/chevronHover.svg) no-repeat;
  background-position: 87px;
}

#sec_opt select:focus {
  position: absolute;
  content: "";
  right: 11px;
  border: 6px solid transparent;
}

#authorWrap select,
#fieldWrap select {
  background-position: 180px;
}

#sec_opt select option {
  color: inherit;
}

#sec_opt select:focus {
  outline: none;
}

#sec_opt select::-ms-expand {
  display: none;
}

#sec_opt select option {
  background: #323232;
  border: none;
  outline: none;
}

select {
  appearance: none;
  /* Remove default styling */
  outline: none;
  /* Remove the outline */
  background-color: transparent;
  /* Set a transparent background */
  /* Add any additional styling you want for the dropdown */
}

select option {
  border-color: transparent;
  /* Set the border color to transparent */
}

#sec_opt select option:focus {
  background: #3e3e3e;
}

#sec_opt select {
  color: #ffffff;
  padding: 0px 16px;
  cursor: pointer;
  user-select: none;
  width: 100%;
  padding-right: 0px;
  padding-left: 0px !important;
  margin-top: 0px;
  z-index: 3;
  padding-bottom: 8px;
  left: -3px;
}

<section id="sec_opt">
  <div class="innerWrap">
    <div class="selectWrap year">
      <div class="custom-select" id="yearWrap">
        <label for="year">Year</label>
        <select>
          <option selected value="0">All</option>
          <option value="1">option1</option>
          <option value="2">option2</option>
          <option value="3">option3</option>
        </select>
      </div>
    </div>
  </div>
</section>