Javascript 选择下拉列表并设置其样式'；s选项

我希望我的选择框和选项下拉列表的样式如下图所示。请帮我做同样的事情。如果只有CSS能做到这一点，那就太好了，否则它就是一个javascript解决方案。提前谢谢

我对Javascript和前端技术非常陌生。目前，下面的代码用于选择框并获取其选项

                        <div class="selectWrapper">
                                <label for="ext-comp-1001" class="inputLabel"><span class="required">*</span><fmt:message key="registration.country"/></label> 
                                <div class="x-form-element" id="x-form-el-ext-comp-1001">
                                    <input id="brand" name="spEntityID" type="hidden" value="<%=spEntityID%>" />
                                    <select autocomplete="off" id="ext-comp-1001" name="country" value="" class=" x-form-select-one x-form-field select_one select_one" onchange="changeStateList()"></select>
                                </div>
                            </div>

* 

---

在上面的代码中，一些Javascript代码包含了所有国家，并且Javascript代码都是用十六进制（UTF-8）编写的。我可以在不接触现有Javascript代码的情况下实现这一点，而现有Javascript代码很难解密和实现所有功能。

要完成您的任务，您需要一些

Javascript

以及一些

CSS

我为您准备了一个演示，这样您就可以在它的基础上进行构建，即使它包含了您想要的所有功能（我的意思是，您可能不会像我为您所做的那样添加那么多）

那么，我们将如何继续：

• 首先，我们将像往常一样准备

  HTML

  （尤其是

  select

  元素），并将添加另一个元素来承载新的或

  自定义select

  ，该元素具有：
  • 显示所选

    选项的文本的元素

  • 表示右侧箭头的元素（如问题中包含的图像中出现的箭头）
  • 包装

    选项的元素（
    JavaScript
    将填充该元素，并相应地更改所选元素文本）

• 基于“real”

  select

  选项填充自定义

  select

• 使用所选的

  选项更改
  自定义选择
  文本

  和

  JavaScript

下一个示例说明了所说的内容，还有一些有用的评论：

/**选择要构建此任务主要功能的元素**/
const select=document.getElementById（“选择框”），
realpoptions=select.options，
customSelect=document.getElementById（“自定义选择”），
selectedText=customSelect.querySelector（“.selected选项文本”），
optionsContainer=customSelect.querySelector（“.options容器”）；
设idx=0；/**这将帮助我们在将单击事件侦听器分配给新添加的自定义选项时获得正确的选项索引**/
/**将click listener添加到自定义“选择”以打开自定义选项容器**/
customSelect.addEventListener（“单击”，（）=>
optionsContainer.classList.add（“可见”）
);
/**循环通过真实“选择”的“选项”元素**/
[…realOptions].forEach（el=>{
让currIdx=idx++；/**这将帮助我们更改实际“选择”元素上的所选“选项”**/
/**如果当前实际“选项”未禁用，我们将添加一个自定义选项（在自定义“选择”中）**/
如果（el.disabled==false）{
/**创建一个新的“p”元素，作为“选项”**/
const customOption=document.createElement（“p”）；
customOption.classList.add（“自定义选项”）；
/**“p”元素的文本与当前（我们在一个循环中！）实际“option”元素相同**/
customOption.textContent=el.textContent；
/**将click listener添加到“p”元素，该元素处理单击自定义选项（即“p”元素）的操作**/
customOption.addEventListener（“单击”，e=>{
/**该事件不会传播到父元素，以防止自定义“选择”始终保持打开状态（请记住上面针对父元素的单击侦听器（自定义“选择”））**/
e、 停止传播（）；
选项container.classList.remove（“可见”）；
realOptions.selectedIndex=currIdx；
选择了text.textContent=el.textContent；
});
/**将充当“选项”的“p”元素添加到自定义“选择”中**/
optionsContainer.append（customOption）；
}
});
*{
框大小：边框框；
保证金：0；
填充：0；
}
/**用于演示目的**/
选择#选择框{
显示：块；
边缘底部：25px；
}
.自定义选择{
位置：相对位置；
最大宽度：50%；/**根据您的要求更改此值。这不是必需的**/
右边填充：10px；
边框：2px实心#595859；
边界半径：6px；
光标：指针；
}
.自定义选择.箭头{
位置：绝对位置；
最高：50%；
右：6px；
转换：translate3d（0，-50%，0）；
字体大小：0.75rem；
}
.自定义选择.arrows>.fa{
显示：内联块；
垂直对齐：中间对齐；
}
.自定义选择.所选选项文本{
填充：8px 6px；
颜色：#595859；
字体大小：粗体；
}
.自定义选择.选项容器{
显示：无；
位置：绝对位置；
宽度：98%；
最大高度：250px；
顶部：8px；
左：0；
右：0；
保证金：自动；
溢出x：隐藏；
溢出y：自动；
背景色：#595859；
颜色：#F5；
边界半径：4px；
}
.custom select.options-container.visible{
显示：块；
}
.custom select.options容器>.custom选项{
填充：4px；
游标：默认值；
过渡期：所有。2秒0轻松；
}
.custom select.options容器>。自定义选项：悬停{
背景色：#ca2128；
}

选择选项
选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7
备选案文8
备选案文9
选择10
请选择一个选项
我编辑了我的帖子，添加了更多信息。我可以在现有代码中实现它，还是不破坏现有功能。您能帮我完成上面的查询吗？@Ankit抱歉迟到了。我会检查并尽快更新我的答案（你会联系的）。你有时间检查吗？