Chrome OSX 中选择选项的控制位置答案

【问题标题】：Control position of select options in Chrome OSXChrome OSX 中选择选项的控制位置
【发布时间】：2021-09-21 11:51:26
【问题描述】：

我在span 中有一个自定义样式的选择。我对它的外观很满意。

span.select {
  border: 1px solid #000000;
  display: inline-block;
  position: relative;
  height: 40px;
}
span.select select {
  appearance: none;
  border: none;
  display: block;
  background: transparent;
  height: 100%;
  padding: 0 55px 0 15px;
  background: orange;
}
span.select:after {
  content: "";
  width: 40px;
  position: absolute;
  border-left: 1px solid #000000;
  height: 100%;
  right: 0;
  top: 0;
  background: blue;
  pointer-events: none;
}

<div style="padding: 30px">
  <span class="select">
    <select name="" id="">
      <option value="">An option within a select</option>
    </select>
  </span>
  
</div>

<div style="padding: 30px">
  <span class="select">
    <select name="" id="">
      <option value="">An option within a select</option>
    </select>
  </span>
  
</div>

我遇到的问题是，当它被点击时，选项出现在左侧几个像素处，可能比我想要的低 1 个像素。这些选项应该确实出现在跨度的边界内。

我知道可点击选项本身是一个 UI 元素并且不可设置样式，但是我可以应用重置或 hack 以使它们出现在中心，而不会破坏其他浏览器的体验？

【问题讨论】：

标签： html css macos google-chrome

【解决方案1】：

我不确定您是否需要它仅适用于 OSX 或其他操作系统，但在 Windows 上它看起来与您的屏幕截图完全不同。如果您使用内置选择元素来可视化选项，您将无法很好地控制它们。原因是下拉列表位于 HTML 和 CSS 控件之外（它是浏览器顶部的操作系统覆盖）。我会建议您自定义下拉菜单的每个可见部分，这样您就可以完全控制它。您仍然可以将“选择”标签用于所有内置事件和易用性，只需将其完全隐藏即可。

如果您只需要在 OSX 上使用这种方法，在您的位置，我会尝试将选择的感知位置向左和向下移动一点。我说感知而不是实际，因为如果你真的移动它，选项也会移动。因此，将一些 div 或类似的东西放在选择的后面，并使它看起来像选择从左下方开始。希望这个 hack 有效。

span{
    background-color: orange;
}
.dropdownSelectedOption{
    margin-top: 10px;
    padding-right: 10px;
    display: inline-block;
}
span.select {
    border: 1px solid #000000;
    display: inline-block;
    position: relative;
    height: 40px;
    padding-right: 40px;
}
span.select select {
    position: absolute;
    top: -10px;
    left: 10px;
    opacity: 0;
    border: none;
    display: block;
    background: transparent;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: transparent;
}
span.select:after {
    content: "";
    width: 40px;
    position: absolute;
    border-left: 1px solid #000000;
    height: 100%;
    right: 0;
    top: 0;
    background: blue;
    pointer-events: none;
}

<span class="select">
    <div class="dropdownSelectedOption">An option within a select</div>
    <select name="" id="" onchange="updateUI(event)">
        <option value="An option within a select">An option within a select</option>
        <option value="option 2 within a select">option 2 within a select</option>
    </select>
</span>

<script>
    function updateUI(event){
        event.target.parentElement.querySelector('.dropdownSelectedOption').innerText = event.target.value;
    }
</script>

通过更改选择的顶部和左侧位置，您将移动选项将出现的位置。（我已经为每个示例放置了 10px）

【讨论】：