CSS下拉选择框是一种常见的前端交互组件,通常用于用户在一组选项中选择一个选项。使用CSS下拉选择框可以提高用户的交互体验,本文将介绍如何使用CSS下拉选择框。 首先,我们需要创建一个下拉选择框的HT
<select> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select>
select { padding: 0.5rem; border: 2px solid #333; border-radius: 5px; font-size: 1rem; appearance: none; -webkit-appearance: none; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M 0 0 L 5 6 L 10 0 Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; cursor: pointer; } <br> option { padding: 0.5rem; }
const select = document.querySelector("select"); <br> select.addEventListener("change", function(event) { alert("你选择了:" + event.target.value); });
粉丝
0
关注
0
收藏
0