我正在创建一个选择下拉菜单，就像一个材质UI下拉菜单，在那里我添加了一个像向上箭头和向下箭头图标的外观，所以我需要向上箭头只发生在下拉菜单显示时，否则向下箭头图标。如果我点击下拉菜单，向上箭头即将到来，但如果你再次点击下拉菜单，则不存在，在那个时候我需要箭头向下的功能。我怎么才能做到这一点呢？
<select className="Select">
<option value="">Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>CSS码
.Select {
font-size: 1.5rem;
width: 10rem;
border-left: none;
border-right: none;
border-top: none;
border-bottom: 2px solid blue;
padding-bottom: 2px;
color: var(--deepGray);
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>')
no-repeat right;
-webkit-appearance: none;
}
.Select:hover {
color: blue;
background: white;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>')
no-repeat right;
}
.Select:focus {
outline: none;
box-shadow: none;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>')
no-repeat right;
background-position: right;
}在此期间，我需要向下箭头
2条答案
按热度按时间8qgya5xd1#
不幸的是，没有JavaScript是不可能做到这一点的。MDN文档记录了定制
<select>元素的难度：众所周知，使用CSS很难有效地设计元素的样式。
元素的内部结构很复杂，很难控制。如果你想获得完全的控制，你应该考虑使用一个具有良好功能的库来样式化表单小部件，或者尝试使用非语义元素、JavaScript和WAI-ARIA来滚动你自己的下拉菜单来提供语义。
如果你使用JavaScript来做这件事，你有很多选择：
1.使用按键事件创建您自己的自定义组件
1.使用React表单库
vlf7wbxs2#
您的问题是
:focus：第一次点击你设置了焦点（同时也打开了列表）。但是只要你没有点击select元素以外的其他地方，焦点就会保持不变，
:focus为true。列表的状态与此无关。=〉单击选择元素以外的任何位置，焦点将从选择元素中消失，切换回正确的 “向下箭头” 符号。
一种可能性就是
但你还是得找到正确的触发事件
因为我看不出CSS有可能区分状态“select list
open/closed”，你可能需要通过javascript检查select对象或其选项项的状态来实现你的效果。也许你会考虑你的愿望，因为你在这里发明了对JavaScript代码的需求，而不是真正需要的功能。