有一种方法可以在CSS中选择一个打开的选择框？

Question

I将WebKit-apercearance属性设置为无。打开选项列表时，我想显示另一个背景图像（箭头上）。有伪课吗？在研究期间我找不到任何东西...

Answer 1

您可以使用

:focus

伪类。

但这将指示“打开”状态，同样是通过选项卡选择

<select>

或仅选择项目时。为了解决这个问题，您可能会使用类似

select:hover:focus

的东西，但这是丑陋的，不是一个可靠的解决方案。

select:focus {
  background-color: blue;
  color: white;
}

<select>
  <option>Click me</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Answer 2

select

元素，甚至是JavaScript。

如果您希望自定义自定义下拉列表的箭头符号，那么您的最佳选择是使用自定义下拉列表，该下拉列表映射到隐藏的

select

元素。

这个帖子很古老，但是今天；

::before

Answer 3

这里是使用pseudo-Class的好机会。我做了这个简单的代码蛋白，证明了它的使用。

codepen

片段：

::after

:focus-within

使用pseudo-class*。

@charset "UTF-8";
.wrapper {
  position: relative;
  display: inline-block;
}
.wrapper::after {
  content: "";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 16px;
  top: 22px;
  font-size: 18px;
  pointer-events: none;
  transition: 0.2s ease;
}
.wrapper:focus-within::after {
  transform: rotateX(0.5turn) translateY(-2px);
}
.wrapper select {
  background: linear-gradient(180deg, #F8F9FB 0%, #F1F2F4 100%);
  border: 1px solid var(--grayscale-400);
  box-sizing: border-box;
  border-radius: 3px;
  width: 200px;
  left: 2px;
  cursor: pointer;
  padding: 24px 12px;
  font-size: 16px;
  appearance: none;
}
.wrapper select:focus {
  outline: unset;
}
.wrapper select > option:first-child {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div class="wrapper">
  <select>
    <option>Choice Label First</option>
    <option value="Choice 1">Choice 1</option>
    <option value="Choice 2">Choice 2</option>
    <option value="Choice 3">Choice 3</option>
    <option value="Choice 4">Choice 4</option>
  </select>
</div>

Answer 4

*不幸的是，在编写浏览器支持时，对pseudo-class的支持很小。您将需要注意确保没有应用

:open

样式的

select {
  background-color: white;
  color: blue;
  
  &:open {
    background-color: blue;
    color: white;
  }
}

元素仍然可以正常工作。

您可以使用

<select>
  <option>Lorem</option>
  <option>Ipsum</option>
</select>

来检测支持浏览器并更新所需的样式：

:open

---