欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

用css和js寫下拉列表

黃文隆2年前7瀏覽0評論

下拉列表是網頁中常用的組件之一,可以讓用戶以更直觀和方便的方式選擇特定的選項。本文將介紹如何使用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代碼,我們已經實現了一個簡單但定制化的下拉列表。可以根據需要進一步添加樣式和功能,以達到滿足特定需求的目的。