Удаление элемента из потока документов

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%;.

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 была изменена на классы не требуется, я просто сделал это, потому что мне не нравятся # идентификаторы.

• Такжеудалены некоторые другие ненужные стили, которые больше не нужны по крайней мере для предоставленного кода.

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>