html菜单箭头,html – 纯CSS选择菜单/下拉菜单：如何制作右箭头功能？

我根据解决方案使用自定义选择/下拉菜单：

https://stackoverflow.com/a/10190884/1318135

这个功能很棒,只有在单击该框时才显示选项.单击右侧的“箭头”不会显示下拉选项.什么是变通方法？

HTML：

Sushi

Blue cheese with crackers

Steak

Other

CSS：

label.custom-select {

position: relative;

display: inline-block;

}

.custom-select select {

display: inline-block;

padding: 4px 3px 3px 5px;

margin: 0;

font: inherit;

outline:none; /* remove focus ring from Webkit */

line-height: 1.2;

background: #000;

color:white;

border:0;

}

/* Select arrow styling */

.custom-select:after {

content: "▼";

position: absolute;

top: 0;

right: 0;

bottom: 0;

font-size: 60%;

line-height: 30px;

padding: 0 7px;

background: #000;

color: white;

}

.no-pointer-events .custom-select:after {

content: none;

}