javascript - 从文档流中删除元素

Question

我正在使用 [type=checkbox] 为我创建的自定义下拉菜单记录用户输入。我也将它用于浏览器中的 required 功能。

但是，我遇到的问题是该元素似乎至少需要 1px 的 height 才能在用户访问时触发浏览器警告消息尝试在不填写该部分的情况下提交表格。这是一个问题，因为下拉菜单的 height 为 auto，所以一旦显示浏览器警告消息，它就会将所有内容向上移动，以便有一个 >1px 底部间隙。

值得注意的是，只有在显示警告消息时或显示警告消息后，内容才会发生变化。

我知道我可以通过 positioning 元素 absolutely 使用 JS 来解决这个问题，但我正在尝试尽可能少地使用 JS。因此，我为容器指定了一个 position: relative，并定位该元素，使其始终显示在容器元素的底部中心，就像所有其他字段一样。

#dropdown {
  position: relative;
}

#subject {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  padding: 0;
  opacity: 0;
  margin: 0;
}

正如我上面所说，我已经尝试将高度设置为 0，但这样做不会触发警告消息。我还尝试了几个不同的 display 值(我将在完成此设置后检查其余值)。我也试过应用 position: absolute; bottom: 0; 到列表中的最后一个选项。这些东西都不起作用。

const
  option = document.querySelector('#option')

document.querySelector('#dropdown').addEventListener('click', function(){
  option.style.maxHeight = option.scrollHeight + 'px'
})

#dropdown {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border: solid red 3px;
}

#label {
  padding: 50px;
}

#option {
  max-height: 0;
  transition:
    .5s max-height;
}

#option:hover {
  background: skyblue;
}

#checkbox {
  width: 5px;
  height: 5px; /* added extra pixels to emphasize the issue */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  padding: 0;
  opacity: 0;
  margin: 0;
}

<form>
  <div id='dropdown'>
    <div id='label'>Subject</div>
    <div id='option'>Last Option</div>
    <input id='checkbox' type='checkbox' required />
  </div>
  <input type='submit' />
</form>

有人知道我如何仅使用 CSS 就能做到这一点吗？

容器的 height 为 auto 是否有可能？

Answer 1

使用 position: static 和 display: block 似乎对我有用。这确实使工具提示出现在 div 的顶部，但是:

const option = document.getElementById('option')

document.getElementById('dropdown').addEventListener('click', function(){
  option.style.maxHeight = option.scrollHeight + 'px'
})

#dropdown {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border: solid red 3px;
}

#label {
  padding: 50px;
}

#option {
  max-height: 0;
  transition:
    .5s max-height;
}

#option:hover {
  background: skyblue;
}

#checkbox {
    /* display: block; */
    width: 100%;
    /* height: 11px; */
    position: absolute;
    pointer-events: none;
    bottom: 0;
    padding: 0;
    opacity: 0;
    margin: 0;
    background-color: #0f0f0f;
    width: 5px;
    left: 50%;
}

#checkbox {

}

<form>
  <div id='dropdown'>
    <div id='label'>Subject</div>
    <div id='option'>Last Option</div>
    <input id='checkbox' type='checkbox' required />
  </div>
  <input type='submit' />
</form>

我发现使用 top: 100%; 是这里的问题。