有没有办法在CSS中选择一个打开的选择框？

Question

在将webkit-appearance属性设置为none后,我将背景图像(向下箭头)设置为选择框.打开选项列表时,我想显示另一个背景图像(向上箭头).是否有伪类或其他东西？我在研究过程中找不到任何东西......

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

这篇文章很旧，但和今天一样；的::before和::after伪类仍然不适用于选择元素

\n

这是一个使用的好机会:focus-within伪类的好机会。我制作了这个简单的 codepen 来演示它的用法。

\n

这笔

\n

片段：\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n

Answer 3

无法检测是否select使用CSS或甚至是javascript打开HTML 元素.

如果您希望自定义自定义下拉列表的箭头符号,则最佳选择是使用映射到隐藏select元素的自定义下拉组件.