自定义Dropdown/Select菜单边框异常问题求助

这个问题源于盒模型计算偏差和元素定位宽度溢出，以下是可行的修复方案：

修复核心要点 #

• 统一盒模型规则，让元素宽度计算包含边框与内边距，避免溢出
• 消除不必要的内边距差异，避免视觉错位
• 强制下拉面板与父容器对齐

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Custom Select</title>
  <style>
    * {
      box-sizing: border-box; /* 全局统一盒模型，从根源避免宽度溢出 */
    }
    .custom-select {
      position: relative;
      display: inline-block;
    }
    .select-selected {
      background-color: white;
      color: black;
      padding: 10px; /* 统一内边距，删除单独的padding-right */
      border: 1px solid gray;
      border-radius: 10px;
      cursor: pointer;
    }
    .select-items {
      display: none;
      position: absolute;
      background-color: white;
      border: 1px solid gray;
      border-top: none;
      border-radius: 0 0 10px 10px;
      z-index: 999;
      width: 100%;
      left: 0; /* 强制对齐父容器左侧，避免偏移 */
    }
    .select-items div {
      padding: 10px;
      cursor: pointer;
    }
    .select-items div:hover {
      background-color: lightgray;
      border-radius: 10px;
    }
    .select-selected.active {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const customSelect = document.querySelector(".custom-select");
      const selectSelected = customSelect.querySelector(".select-selected");
      const selectItems = customSelect.querySelector(".select-items");
      const optionDivs = selectItems.querySelectorAll("div");
      selectSelected.addEventListener("click", function() {
        if (selectItems.style.display === "none") {
          selectItems.style.display = "block";
          selectSelected.classList.add("active");
        } else {
          selectItems.style.display = "none";
          selectSelected.classList.remove("active");
        }
      });
      optionDivs.forEach(function(div) {
        div.addEventListener("click", function() {
          const selectedOptionText = div.textContent;
          selectSelected.textContent = selectedOptionText;
          selectItems.style.display = "none";
          selectSelected.classList.remove("active");
        });
      });
      document.addEventListener('click', function(e) {
        if (!customSelect.contains(e.target)) {
          selectItems.style.display = 'none';
          selectSelected.classList.remove("active");
        }
      });
    });
  </script>
</head>
<body>
  <div class="custom-select">
    <div class="select-selected">Select an option</div>
    <div class="select-items">
      <div>Option 1</div>
      <div>Option 2</div>
      <div>Option 3</div>
    </div>
  </div>
</body>
</html>

修改说明 #

1. 全局盒模型设置：* { box-sizing: border-box; }让所有元素的宽度计算包含边框和内边距，彻底避免因宽度溢出产生的异常线条。
2. 统一内边距：删除.select-selected单独设置的padding-right:9px，改用统一的padding:10px，消除内边距不一致导致的视觉错位。
3. 强制对齐：给.select-items添加left:0，确保下拉面板完全贴合父容器左侧，解决定位偏移问题。

这些修改会彻底解决侧边异常线条问题，同时保留下拉框的圆角功能与交互逻辑。

内容的提问来源于stack exchange，提问作者Best Codes