Во вкладках (табах) не отображается форма. Отображается только текст. Где ошибка?

Question

[Вячеслав Грабенко]

Задача: в каждую вкладку добавить форму для ввода данных.


У меня эта форма не отображается во вкладке и не знаю почему. Опыта не хватает - понять)
P.S. Код табов взял с интернета, не знаю как правильно писать табы, изменил только стили под свой макет.

Answer 1

[Владимир Проскурин]

Ну так у вас стоит мега-убийца

.tabs div {
    display: none;
}

который скрывает все дивы внутри табов.
Еще и

.tabs input {
    display:none;
}

зачем-то.
Не делайте никогда такие селекторы, по тегам. Лучше добавьте в нужным тегам конкретный класс, и по нему уже пишите селектор.
Вот пример, тут все ок, посмотрите пожалуйста, что там изменилось, и подумайте, почему https://codepen.io/anon/pen/jowQjP

Comments

[Вячеслав Грабенко]

А ниже убийца обезвреживается)

#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3 {
display: block;
}

дело в чем-то другом)

[Владимир Проскурин]

не обезвреживается, он обезвреживается только для конкретных блоков, #txt_1, #txt_2, #txt_3, а те дивы, в которых находятся ваши поля, так и остаются скрытыми.

[Вячеслав Грабенко]

Спасибо, что ткнули носом в очевидную ошибку)
я понял в чем ошибка)
не работало из-за того, что css свойство было прописано для тега и input {d:none} применялся ко всем инпутам которые есть в блоке)
Урок усвоил, спасибо за помощь)