Javascript 如何更改html选择框的箭头颜色？

我想设计一个引导选择元素的样式，如下图所示：

但不幸的是无法改变箭头的颜色

#测试{
边框：1px实心#dd6592；
边界半径：0px；
文本对齐：居中；
宽度：20%；
字体大小：16px；
边缘底部：20px；
}

试验
试验
试验

如果您使用的是引导，您应该在button元素的右侧看到一个带有类“caret”的span。您需要更改颜色样式

无法更改该箭头交叉浏览器上的颜色

这里是一个变通方法，使用包装器和伪元素

.myselect{
位置：相对位置；
显示：内联块；
}
.myselect选择{
高度：30px；
边框颜色：红色；
右边填充：10px；
大纲：无；
}
.myselect：：之后{
内容：''；
位置：绝对位置；
右：4px；
顶部：11px；
宽度：0；
身高：0；
左边框：8px实心透明；
右边框：8px实心透明；
边框顶部：8px实心rgba（255,0,0,1）；
指针事件：无；
}

试验
试验
试验

不要忘记使用

外观

CSS属性隐藏浏览器提供的默认向下箭头

.myselect {
  position: relative;
}
.myselect select {
  height: 26px;
  appearance: none;
  color: #636A7B;
  padding: 0 20px;
}
.myselect::after {
    font-family: 'Font Awesome\ 5 Free';
    content: "\f107";
    position: absolute;
    font-weight: 600; 
    right: 5px;
    top: 7px;
    color: #C5C7D2;
    background: white;
}

---

以下是该酒店的官方文档：

您能告诉我们您迄今为止尝试过的代码吗？@nafi pantha。。你能把你的密码贴在这里吗。，