纯CSS解决方案来改变点击事件下拉选项的V形？

有没有一个纯CSS的解决方案来改变下拉选项的V形使用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;
}

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

...它可以很好地与hover一起工作，但我需要与onClick相同。
我对JavaScript solution的问题是标记被改变了。
我希望尽可能地消除JavaScript。可以，但不操作标记。
也有this解决方案，但我不知道如何实现它到我的情况。

可以使用**：focus代替：hover**
当它失去焦点时，它会切换回默认背景。

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>

纯CSS解决方案来改变点击事件下拉选项的V形？

1条答案

相关问题

热门标签

最新问答