Проверено свойство на входе html для скрытия содержимого с css, когда блоки расположены по-разному - PullRequest
0 голосов
/ 16 апреля 2020

Проблема в том, могу ли я соединить ввод с кнопками так, как показано в коде ниже, или без изменения html это невозможно (если я не буду использовать для этого код js). Не ругайте html код, этот пример с одного сайта, я просто пытаюсь выяснить, возможно ли получить доступ к другим блокам, данным вложением.

input:checked ~ button{
    display: none;
  }

<div  id="form">
    <section class="container">
        <form class="form">
            <section class="checkbox-control">
                <label for="personal-data-checkbox" class="checkbox-border">
                    <input type="checkbox"  id="personal-data-checkbox">
                </label>
                <label for="personal-data-checkbox" class="checkbox-label">
                    <span class="consent-message"></span>
                </label>
            </section>

            <section class="checkbox-control">
                <label for="cookie-checkbox" class="checkbox-border">
                    <input type="checkbox"  id="cookie-checkbox">
                </label>
                <label for="cookie--checkbox" class="checkbox-label">
                    <span> </span>
                </label>
            </section>

            <section class="buttons">
                <section class="confirm">
                    <button class="accept-all-button button">Agree to all</button>
                    <button class="confirm-button button hidden-button">Confirm</button>
                </section>
            </section>    
        </form>
    </section>
</div>

1 Ответ

0 голосов
/ 16 апреля 2020

можно ли подключить вход с помощью кнопок

Нет, вы не можете подключиться. По состоянию на апрель 2020 года нет селектора для выбора родителя от дочернего элемента

Однако https://dev.w3.org/csswg/selectors4/#relational. Это означает, что c говорит, что они будут включать :has() selecor. Используя который вы можете сделать это как

.checkbox-control:has(input:checked) ~ .buttons button {
      display: none;
}

Но в настоящее время это не поддерживается

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...