Стилизация блока на css?

Question

[Михаил Ермолаев]

Окей, всем спасибо за ответы. Но теперь новая проблема
Я смог это сделать с помощью такой конструкции.
html -

label class="btn__inn" for="toggle-1" PRESS ME label
input type="checkbox" id="toggle-1"
label class="cube" for="toggle-1"label

CSS -
input[type=checkbox]:checked ~ .cube {
display: none;
}

Но не могу разобраться с дальнейшими проблемами.

1. Данный блок скрывается даже при нажатии в любое место данного квадрата, да и к тому же кнопка остается всегда на месте.
Я понимаю, что сейчас событие как бы привязано к квадрату, а надо к кнопке.

2. В дальнейшем в этом квадрате будет еще так же пара иконок и инпут для ввода промокодов всяких.

Ну и соответственно, когда я пытаюсь добавить еще хотя бы один инпут, он так же НЕ исчезает.

Как сделать так, что бы при нажатии на кнопку исчезало вообще все? Вместе с кнопкой и всем содержимым?

Comments

[Александр]

п.с. Должно быть выполнено на чистом css.

Это тестовое задание?

[Lord_Dantes]

Александр, макет с интернета, поэтому 50 на 50

[Михаил Ермолаев]

Александр, Макет из интернета, делаю просто для себя. Просто выяснил, что можно сделать это на чистом css, поэтому решил спросить совета.

[Михаил Ермолаев]

Lord_Dantes, Макет из интернета, делаю просто для себя. Просто выяснил, что можно сделать это на чистом css, поэтому решил спросить совета.

[Антон Литвиненко]

я вот тоже зашел спросить в чем необходимость такого подхода. на продакшен такое не делают

[Михаил Ермолаев]

Антон Литвиненко, для опыта.

[Rustam Bainazarov]

Михаил Ермолаев, для опыта делают то, что нужно делать за деньги, а за деньги такое безумие никто не делает.

Ну а так, вот:

[Михаил Ермолаев]

Рустам Байназаров, респект!
Я знаю, но решил просто попробовать для себя. Огроменное спасибо.

Answer 1

[Steppp]

У чекбокса есть свойство checked - вот к checked и привязываться!

input div {}
input:checked div {}