Blame view
public/assets/css/tabs.css
1.02 KB
622420a67 Расширение функци... |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.tabs { font-size: 0; } .tabs>input[type="radio"] { display: none; } .tabs>div { /* скрыть контент по умолчанию */ display: none; border: 1px solid #e0e0e0; padding: 10px 15px; font-size: 16px; } /* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */ #tab-btn-1:checked~#content-1, #tab-btn-2:checked~#content-2, #tab-btn-3:checked~#content-3 { display: block; } .tabs>label { display: inline-block; text-align: center; vertical-align: middle; user-select: none; background-color: #f5f5f5; border: 1px solid #e0e0e0; padding: 2px 8px; font-size: 16px; line-height: 1.5; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; cursor: pointer; position: relative; top: 1px; } .tabs>label:not(:first-of-type) { border-left: none; } .tabs>input[type="radio"]:checked+label { background-color: #fff; border-bottom: 1px solid #fff; } |