/* Базовый контейнер табов */ .tabs { min-width: 320px; max-width: 800px; padding: 0px; margin: 0 auto; } /* стили секций с содержанием */ section { display: none; padding: 15px; background: #fff; border: 1px solid #ddd; } .tabs input { display: none; } /* стили вкладок (табов) */ .tabs label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #aaa; border: 1px solid #ddd; background: #f1f1f1; border-radius: 3px 3px 0 0; } /* изменения стиля заголовков вкладок при наведении */ .tabs label:hover { color: #888; cursor: pointer; } /* стили для активной вкладки */ .tabs input:checked + label { color: #555; border: 1px solid #ddd; border-top: 1px solid #009933; border-bottom: 1px solid #fff; background: #fff; } /* активация секций с помощью переключателя :checked */ #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; } /* медиа запросы для различных типов носителей */ @media screen and (max-width: 680px) { .tabs label { font-size: 0; } .tabs label:before { margin: 0; font-size: 18px; } } @media screen and (max-width: 400px) { .tabs label { padding: 15px; } }