Javascript 更改HTML选项选择为图标样式

是否可以使选择选项看起来像图标

我的意思是，当你点击一个图标时，选择菜单将出现，而不是框样式。可能吗

我的意思是这样的

函数dropdownttoggle（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdown=document.getElementsByClassName（“下拉内容”）[0]；
if（dropdown.classList.contains（'show'））{
dropdown.classList.remove（'show'）；
}
}
}
window.onload=函数（）{
var selections=document.getElementsByClassName（'selection'）；
对于（变量i=0；i

.dropbtn{
背景色：#3498DB；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
边界半径：5px；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#2980B9；
}
.没有按钮{
宽度：15px；
背景色：透明；
颜色：黑色；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表a:悬停{背景色：#ddd；}
.show{display:block；}

您只需在“选择”下拉列表中添加一个字体图标（作为文本！）。您只需要CSS中的一些东西，CSS和unicode。

不，我的意思是当我点击图标时，选择菜单将打开，因此框样式将按图标更改。我希望现在可以清楚地看到，如果现在我可以向您展示图像“框样式将按图标更改”-我不明白这是什么框样式？非常感谢Ray，这比我要求的更多。我感谢你的时间和努力来帮助我，我会研究你的代码，以了解你是如何做到这一点的