有没有办法在css中选择一个打开的选择框?

Posted

技术标签:

【中文标题】有没有办法在css中选择一个打开的选择框?【英文标题】:Is there a way to select an open select box in css? 【发布时间】:2015-12-18 01:19:24 【问题描述】:

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

【问题讨论】:

您好,请向我们展示您尝试过的任何代码,然后我们可以开始帮助您朝着正确的方向前进 【参考方案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>

【讨论】:

select:focus:active 至少在 Chrome 中完成了这项工作。 总比没有好,至少在 Chrome 中是这样,但问题是选择一个选项仍然处于打开状态,直到您移动元素的鼠标 select:focus:active 如果控件是通过键盘打开的,则在 Chrome 中也不起作用。【参考方案2】:

无法检测 html select 元素是否使用 CSS 甚至 javascript 打开。

如果您希望自定义自定义下拉菜单的箭头符号,最好的选择是使用映射到隐藏的select 元素的自定义下拉组件。

【讨论】:

哦,真可惜,这样的功能会很有用。不过非常感谢!【参考方案3】:

这篇文章很旧,但和今天一样; ::before::after 伪类仍然不能在选择元素上工作。

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

codepen

sn-p:

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

【讨论】:

欢迎来到 Stack Overflow。任何用户贡献的代码都应该以文本形式发布,因为如果外部链接过期,问题和答案可能会失去其价值。 Stack Overflow 有一个 built-in snippet feature,您可以使用它在您的帖子中嵌入一个可运行的示例,同时在 Stack Overflow 上保留代码。 感谢您的反馈!我在我的答案中添加代码。

以上是关于有没有办法在css中选择一个打开的选择框?的主要内容,如果未能解决你的问题,请参考以下文章

GridView添加下拉框可以选择显示多少条

使用产品插件选择框显示产品价格 WooCommerce

有没有办法在IE8中居中选择/组合框选项元素?

使用弹出框选择日期时间?

以编程方式更改模型时选择框不更新

按 esc 后无法打开日期选择器