下拉列表是網頁中常用的組件之一,可以讓用戶以更直觀和方便的方式選擇特定的選項。本文將介紹如何使用CSS和JS來創建一個定制化的下拉列表。
<html> <body> <select id="myDropdown"> <option value="apple">蘋果</option> <option value="banana">香蕉</option> <option value="cherry">櫻桃</option> </select> <script> var dropdown = document.getElementById("myDropdown"); dropdown.addEventListener("change", function() { var selectedOption = this.options[this.selectedIndex]; console.log(selectedOption.value); }); </script> </body> </html>
通過以上代碼,我們已經創建了一個簡單的下拉列表,并監聽了其變化事件。但是,該下拉列表還沒有樣式。下面使用CSS來為其添加樣式。
#myDropdown { width: 200px; height: 30px; font-size: 16px; border-radius: 5px; border: none; outline: none; text-align: center; background-color: #f2f2f2; color: #666; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #myDropdown option { padding: 10px 20px; font-size: 16px; }
以上樣式代碼給下拉列表添加了樣式,包括寬度高度、字體大小、圓角、邊框、背景色等。同時,option標簽也被樣式化,給出了選項的內邊距及字體大小。
通過以上CSS和JS代碼,我們已經實現了一個簡單但定制化的下拉列表。可以根據需要進一步添加樣式和功能,以達到滿足特定需求的目的。