在表单中将下拉菜单切成两半

<form>
  <label for="dropdown">选择一个选项：</label>
  <select id="dropdown">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
    <option value="option4">选项4</option>
    <option value="option5">选项5</option>
  </select>
</form>

form {
  position: relative;
  width: 200px; /* 调整表单宽度以适应需求 */
}

select {
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #f2f2f2;
}

select::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #f2f2f2;
  pointer-events: none; /* 防止伪元素遮挡下拉菜单 */
}

select::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #f2f2f2;
  pointer-events: none; /* 防止伪元素遮挡下拉菜单 */
}

const dropdown = document.getElementById("dropdown");

dropdown.addEventListener("change", function() {
  const selectedOption = dropdown.selectedIndex;
  const optionCount = dropdown.options.length;
  const leftWidth = (selectedOption / optionCount) * 100;
  const rightWidth = ((optionCount - selectedOption - 1) / optionCount) * 100;

  dropdown.style.setProperty("--left-width", `${leftWidth}%`);
  dropdown.style.setProperty("--right-width", `${rightWidth}%`);
});