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

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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: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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

...which works well with hover, but I'd need the same with an onClick.

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.

Instead of :hover, you can use :focus

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

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

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->