css下拉列表框提示请选择

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样式来设定下拉框的选中状态和鼠标悬浮状态的样式。