Question

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

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

值得注意的是，仅在显示警告消息或显示警告消息时内容才会移动。

我知道我可以使用JS的positioning元素absolutely来解决此问题，但是我正在尝试使用尽可能少的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%;是这里的问题。

Answer 2

重大更改

div#option现在为label.option[for='checkbox']。如果标签具有[for]属性，且其值为复选框或单选#id，则它们将彼此关联，因此，如果用户单击一个，则也会单击另一个。只要两者都在同一个页面上，无论它们有多接近，相距遥远，嵌套或不嵌套，此关联都有效。
label[for='checkbox']分配了display:block，因为它替换了一个div。
#checkbox现在完全不在div,dropdown范围内，并分配了z-index:-1并以vh和vw单位定位，因此其位置将响应地调整为任何窗口调整大小。表单具有明确设置的背景颜色，因此该复选框被完全隐藏，但是就浏览器而言，它是可见的，因此required将始终有效。

微小变化

大多数#id都不需要更改为类，我这样做是因为我不喜欢#ids。
还删除了至少在所提供的代码中不再需要的一些其他不必要的样式。

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

form {
  background: #fff
}

.dropdown {
  overflow: hidden;
  border: solid red 1px;
}

.label {
  display: block;
  padding: 50px;
}

.option {
  display: block;
  max-height: 0;
  transition: max-height 0.5s
}

.option:hover {
  background: skyblue;
}

#checkbox {
  display: block;
  position: relative;
  z-index: -1;
  left: 50vw;
  bottom: 10vh;
}

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

从文档流中删除元素

2 个答案:

重大更改

微小变化