将关于下拉列表改为中文并使用JavaScript和CSS实现
select {
appearance: none; /* 隐藏默认的下拉箭头 */
background-image: url('dropdown-arrow.png'); /* 显示自定义的箭头 */
background-position: right center;
background-repeat: no-repeat;
padding-right: 24px; /* 预留箭头宽度 */
}
/* 鼠标悬浮和下拉时的样式 */
select:hover, select:active, select:focus {
outline: none;
border: 1px solid #ccc;
}
var aboutDropdown = document.getElementById('about-dropdown');
aboutDropdown.addEventListener('change', function() {
var selectedValue = aboutDropdown.value;
if (selectedValue) {
window.location.href = '/' + selectedValue + '.html';
}
});
通过以上三个步骤,就可以将关于下拉列表改为中文,并使用 JavaScript 和 CSS 实现下拉列表功能。