有没有办法 select 在 css 中打开一个 select 框?
Is there a way to select an open select box in css?
在将 webkit-appearance 属性设置为 none 后,我将背景图像(向下箭头)设置为 select 框。打开选项列表时,我想显示另一个背景图像(向上箭头)。是否有伪 class 之类的东西?我在研究期间找不到任何东西...
无法检测 HTML select
元素是否使用 CSS 打开,甚至 javascript.
如果您希望自定义自定义下拉菜单的箭头符号,最好的选择是使用映射到隐藏 select
元素的自定义下拉组件。
您可以使用 :focus
伪 class。
但这将指示 "open" 状态,当通过选项卡选择 <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>
这个post是旧的,但和今天一样; ::before
和 ::after
伪 class 仍然不能在 select 元素上工作。
这是使用:focus-within
伪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>
在将 webkit-appearance 属性设置为 none 后,我将背景图像(向下箭头)设置为 select 框。打开选项列表时,我想显示另一个背景图像(向上箭头)。是否有伪 class 之类的东西?我在研究期间找不到任何东西...
无法检测 HTML select
元素是否使用 CSS 打开,甚至 javascript.
如果您希望自定义自定义下拉菜单的箭头符号,最好的选择是使用映射到隐藏 select
元素的自定义下拉组件。
您可以使用 :focus
伪 class。
但这将指示 "open" 状态,当通过选项卡选择 <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>
这个post是旧的,但和今天一样; ::before
和 ::after
伪 class 仍然不能在 select 元素上工作。
这是使用:focus-within
伪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>