CSS下拉列表框提示请选择.select { position: relative; display: inline-block; /* 设定下拉框宽度 */ width: 200px; } .sel
CSS下拉列表框提示请选择
.select { position: relative; display: inline-block; /* 设定下拉框宽度 */ width: 200px; } .select select { /* 隐藏option框 */ display: none; } .select .placeholder { /* 设定默认字体颜色 */ color: #aaa; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* 设定显示位置 */ padding: 10px; } .select.select-selected .placeholder { /* 选中颜色 */ color: #000; } .select.select-selected select { /* 显示option框 */ display: block; } /* 下拉框箭头 */ .select::after { /* 使用unicode编码实现箭头 */ content: '\25BC'; font-size: 0.8em; /* 设定箭头相对位置和间距 */ position: absolute; top: 50%; right: 10px; transform: translateY(-50%); } /* 鼠标悬浮样式 */ .select:hover::after { /* 修改箭头颜色 */ color: blue; }
下面是示例代码:
<div class="select" > <div class="placeholder">请选择</div> <select name="fruit"> <option value="" disabled selected hidden>请选择水果</option> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橘子</option> </select> </div>
以上代码可以实现一个基本的下拉选择框,但是没有默认选中“请选择”的效果。我们可以使用JavaScript来实现这个功能:
// 获取所有下拉框 const selectList = document.querySelectorAll('.select'); // 遍历下拉框 selectList.forEach(select => { // 获取默认值 const placeholder = select.querySelector('.placeholder'); // 获取select标签 const selectTag = select.querySelector('select'); // 添加change事件监听器 selectTag.addEventListener('change', () => { // 设置选中状态 select.classList.add('select-selected'); }); // 添加focus和blur事件监听器 selectTag.addEventListener('focus', () => { select.classList.add('select-focus'); }); selectTag.addEventListener('blur', () => { select.classList.remove('select-focus'); }); // 添加默认值 placeholder.addEventListener('click', () => { select.classList.add('select-selected'); // 设置默认值:第一个option selectTag.selectedIndex = 1; }); });
使用以上JavaScript代码,我们就可以在下拉框中添加“请选择”这一默认值了。另外,我们还可以使用CSS样式来设定下拉框的选中状态和鼠标悬浮状态的样式。
粉丝
0
关注
0
收藏
0