纯css为select添加样式(无脚本)实现

为select添加样式一直是一个比较棘手的问题，特别是在没有脚本的情况下。但是可以使用纯 CSS 解决此问题。下面是实现此功能的完整攻略：

步骤一：隐藏原生select，并创建一个替代元素

使用 visibility: hidden; 属性可以隐藏 select 元素，但还需要创建一个替代元素。这可以使用自定义样式的 div 或 span 元素来实现。

select {
  visibility: hidden;
}

.custom-select {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0.5rem;
  cursor: pointer;
  display: inline-block;
  position: relative;
  user-select: none;
}

.custom-select:before {
  content: "\25BC";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

上面这个代码块中的 .custom-select 类定义了一个替代的 select 元素，并设置了一些基本样式。这里的 :before 伪类使用 content 属性显示下拉箭头，并使其相对于选定元素定位。

步骤二：使用 hidden 的 checkbox 元素创建下拉选项

隐藏的 checkbox 元素将被用于控制选项的显示状态。每个选项需要一个对应的label元素。这样当用户点击在元素区域内的任何地方时，都会触发label元素上的的事件，从而切换 checkbox 元素的状态，并显示或隐藏选项。

<div class="custom-select">
  <input type="checkbox" id="select1" class="select-hidden" />
  <label for="select1" class="select">
    Select an option
  </label>
  <ul class="options">
    <li>
      <label for="select1-option1">Option 1</label>
      <input type="radio" id="select1-option1" name="options" />
    </li>
    <li>
      <label for="select1-option2">Option 2</label>
      <input type="radio" id="select1-option2" name="options" />
    </li>
    <li>
      <label for="select1-option3">Option 3</label>
      <input type="radio" id="select1-option3" name="options" />
    </li>
  </ul>
</div>

上述示例代码中的 .select-hidden 类仅将 checkbox 元素设置为 display: none，以便在用户 点击label元素时展示对应的选项。

步骤三：为下拉选项添加样式和动画

为选项列表添加样式和动画以提高它们的可视性和可用性。

.custom-select .options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  z-index: 99;
  cursor: pointer;
  animation: show-options 0.2s ease-in-out forwards;
  transform-origin: top center;
}

.custom-select .options li {
  border-bottom: 1px solid #ccc;
  padding: 0.5rem;
  text-align: center;
  transition: background 0.1s ease-in-out;
}

.custom-select .options li:last-child {
  border-bottom: none;
}

.custom-select .options li:hover,
.custom-select .options li.selected {
  background-color: #f8f8f8;
}

上面这个代码块中的 .options 类定义了下拉选项的样式。动画是通过animation属性实现的，它会使下拉选项沿着选项的上边界动画显示出来。

示例

下面是两个使用上述三个步骤创建的实例。

示例一

<div class="custom-select">
  <input type="checkbox" id="select1" class="select-hidden" />
  <label for="select1" class="select">
    Select an option
  </label>
  <ul class="options">
    <li>
      <label for="select1-option1">Option 1</label>
      <input type="radio" id="select1-option1" name="options" />
    </li>
    <li>
      <label for="select1-option2">Option 2</label>
      <input type="radio" id="select1-option2" name="options" />
    </li>
    <li>
      <label for="select1-option3">Option 3</label>
      <input type="radio" id="select1-option3" name="options" />
    </li>
  </ul>
</div>

示例二

<div class="custom-select">
  <input type="checkbox" id="select2" class="select-hidden" />
  <label for="select2" class="select">
    Select an option
  </label>
  <ul class="options">
    <li>
      <label for="select2-option1">Option 1</label>
      <input type="radio" id="select2-option1" name="options" />
    </li>
    <li>
      <label for="select2-option2">Option 2</label>
      <input type="radio" id="select2-option2" name="options" />
    </li>
  </ul>
</div>

逐步完成这个过程可以让你简单、轻松地为你的网站或应用程序中的下拉列表添加样式。