使用css打造自定义select(非模拟)实现原理及样式

使用CSS打造自定义的select（非模拟）是很有用的技巧，可以让网站更加美观，增加用户体验，并提高交互性。

一般而言，可以采用以下步骤来打造自定义的select：

1. 创建一个select元素，并隐藏它

首先，需要在HTML文档中创建一个select元素。但是，由于我们想要自定义这个select，所以我们需要将其隐藏起来。为了实现这一点，可以将该元素的“display”属性设置为“none”。这样，我们就能在页面上创建一个自定义的select，而不会被原生的select元素所干扰。

示例代码：

<select id="my-select" style="display: none;">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

1. 创建一个div元素，并设置样式

接下来，需要创建一个div元素，用于模拟自定义的select。该div元素可以有类似于select元素的样式，比如一个边框和一个下拉箭头。这样，在用户点击该元素时，会弹出我们自定义的下拉框，并显示select元素中的选项。

示例代码：

<div class="select-container">
  <div class="select-header">
    <div class="select-value">Select an option</div>
    <div class="select-arrow"></div>
  </div>
  <div class="select-options">
    <div class="select-option" data-value="1">Option 1</div>
    <div class="select-option" data-value="2">Option 2</div>
    <div class="select-option" data-value="3">Option 3</div>
  </div>
</div>

.select-container {
  position: relative;
  display: inline-block;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  cursor: pointer;
  background-color: #eee;
}

.select-value {
  flex: 1;
}

.select-arrow {
  width: 10px;
  height: 10px;
  border-width: 1px 1px 0 0;
  border-style: solid;
  transform: rotate(-45deg);
}

.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
}

.select-option {
  padding: 5px;
  cursor: pointer;
}

.select-option:hover {
  background-color: #eee;
}

1. 使用JavaScript处理选项的选择

最后，还需要使用JavaScript编写代码，以便在用户选择选项时处理所选项目的值，并将该值显示在自定义select中。这可以通过使用“click”事件的监听器来完成。在用户单击一个选项时，我们需要搜索与所选值匹配的select元素选项，并将其值传递给自定义的select。

示例代码：

const selectContainer = document.querySelector(".select-container");
const selectHeader = selectContainer.querySelector(".select-header");
const selectValue = selectHeader.querySelector(".select-value");
const selectArrow = selectHeader.querySelector(".select-arrow");
const selectOptions = selectContainer.querySelector(".select-options");
const selectOptionList = selectOptions.querySelectorAll(".select-option");

selectHeader.addEventListener("click", function() {
  selectOptions.classList.toggle("show");
});

for (let selectOption of selectOptionList) {
  selectOption.addEventListener("click", function() {
    const value = this.getAttribute("data-value");
    selectValue.innerText = this.innerText;
    selectOptions.classList.remove("show");
    const selectElement = document.querySelector("#my-select");
    selectElement.value = value;
  });
}

以上代码可以实现点击自定义select，弹出所有选项。点击某个选项时，将该选项的值传递给自定义select中，并将该选项的文本显示在select值的header文本中。

另外一个示例可以使用伪元素来设计一个漂亮的自定义下拉框，并改变选项文字的颜色：

示例代码：

.select-container2 {
  position: relative;
  display: inline-block;
  width: 200px;
  margin: 50px;
}

.select-header2 {
  padding: 10px 40px 10px 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  font-size: 16px;
  color: #555;
  cursor: pointer;
}

.select-header2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #555;
  transform: translateY(-50%);
}

.select-options2 {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  display: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  font-size: 16px;
  padding: 5px 0;
  margin: 0;
  z-index: 1000;
}

.select-option2 {
  list-style: none;
  padding: 5px 10px;
  color: #555;
  cursor: pointer;
}

.select-option2:hover {
  background-color: #f9f9f9;
}

.select-container2.show .select-header2::after {
  transform: rotate(180deg) translateY(-50%);
}

<div class="select-container2">
  <div class="select-header2">Select an option</div>
  <ul class="select-options2">
    <li class="select-option2">Option 1</li>
    <li class="select-option2">Option 2</li>
    <li class="select-option2">Option 3</li>
  </ul>
</div>

这个示例中，我们使用了伪元素创建了一个下拉箭头，并使用了颜色和字体大小来改变选项的样式。这个示例同样包含了一个click事件监听器，以便在选择选项时更新自定义select。

总结

通过以上的攻略，我们了解到了如何使用CSS打造自定义的select，以及相应的实现原理和样式。这个技巧可以为网站带来很好的用户体验，并且不需要使用JavaScript库或插件。通过这种方式，我们可以自由地自定义选择框的外观和功能，并且可以使其适合我们站点的品牌和设计。