选择下拉菜单并设置其样式

Question

我希望我的选择框和选项下拉菜单的样式如下图所示。 请同样帮我。 如果只有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代码的情况下实现这一目标？

Answer 1

为了完成您的任务，您需要一些JavaScript以及一些CSS 。

我为您准备了一个演示，因此即使它确实包含您想要的所有功能，您也可以在上面进行演示（我的意思是您可能不会像我为您所做的那样添加太多功能）。

因此，我们将如何进行：

• 首先，我们将照常准备HTML （尤其是select元素），并添加另一个元素来托管新的或custom select元素，该元素具有：

  • 显示所选option文本的元素。
  • 一个代表右边箭头的元素（与出现在问题中的图像一样）。
  • 一个用于包装option的元素（ JavaScript会填充该元素，并相应地更改所选元素的文本）。

• 根据“真实” select选项填充自定义select 。

• 使用JavaScript使用selected option更改custom select文本。

下一个示例说明了正在说的内容，还提供了一些有用的注释：

 /** select the elements that are going to build the main functionalities of this task **/ const select = document.getElementById("select-box"), realOptions = select.options, customSelect = document.getElementById("custom-select"), selectedText = customSelect.querySelector(".selected-option-text"), optionsContainer = customSelect.querySelector(".options-container"); let idx = 0; /** this will help us get the correct index of the option when assigning the click event listener to the newly added custom options **/ /** add click listener to the custom "select" to open the custom options container **/ customSelect.addEventListener("click", () => optionsContainer.classList.add("visible") ); /** looping through the "option" elements of the real "select" **/ [...realOptions].forEach(el => { let currIdx = idx++; /** that will help us change the selected "option" on the real "select" eleement **/ /** if the current real "option" is not disabled we add a custom one (in the custom "select") **/ if (el.disabled === false) { /** create a new "p" element that will act as an "option" **/ const customOption = document.createElement("p"); customOption.classList.add("custom-option"); /** the text of the "p" element is the same as the current (we're in a loop !) real "option" element **/ customOption.textContent = el.textContent; /** add click listener to the "p" element that handles the click on a custom option which is the "p" element **/ customOption.addEventListener("click", e => { /** the event doesn't propagate to the parent element to prevent the custom "select" from staying opened always (remember the click listener above for the parent (the custom "select")) **/ e.stopPropagation(); optionsContainer.classList.remove("visible"); realOptions.selectedIndex = currIdx; selectedText.textContent = el.textContent; }); /** add the "p" element which acts as an "option" to the custom "select" **/ optionsContainer.append(customOption); } }); 

 * { box-sizing: border-box; margin: 0; padding: 0; } /** for demo purposes **/ select#select-box { display: block; margin-bottom: 25px; } .custom-select { position: relative; max-width: 50%; /** changes this per your requirements it's not that necessary **/ padding-right: 10px; border: 2px solid #595859; border-radius: 6px; cursor: pointer; } .custom-select .arrows { position: absolute; top: 50%; right: 6px; transform: translate3d(0, -50%, 0); font-size: 0.75rem; } .custom-select .arrows>.fa { display: inline-block; vertical-align: middle; } .custom-select .selected-option-text { padding: 8px 6px; color: #595859; font-weight: bold; } .custom-select .options-container { display: none; position: absolute; width: 98%; max-height: 250px; top: 8px; left: 0; right: 0; margin: auto; overflow-x: hidden; overflow-y: auto; background-color: #595859; color: #f5f5f5; border-radius: 4px; } .custom-select .options-container.visible { display: block; } .custom-select .options-container>.custom-option { padding: 4px; cursor: default; transition: all .2s 0s ease; } .custom-select .options-container>.custom-option:hover { background-color: #ca2128; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" /> <select id="select-box"> <option value="" disabled selected>select option</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> <option value="5">option 5</option> <option value="6">option 6</option> <option value="7">option 7</option> <option value="8">option 8</option> <option value="9">option 9</option> <option value="10">option 10</option> </select> <!-- nothing too fancy here just the "#custom-select" elemnt that will contain the custom select --> <div id="custom-select" class="custom-select"> <div class="selected-option-text">Please select an option</div> <div class="arrows"> <i class="fa fa-sort"></i> </div> <div class="options-container"></div> </div> 

您可以自定义该示例，以更充分地实现所需的最终结果。

我也没有隐藏真正的select因此您可以看到它根据您在自定义选择中选择的选项而改变。

我在这里是您想要的任何澄清。

希望我能进一步推动您。