За последние 24 часа нас посетили 18365 программистов и 1618 роботов. Сейчас ищут 1132 программиста ...

Как сделать label уникальным

Тема в разделе "HTML и CSS", создана пользователем Vladd55, 13 апр 2023.

  1. Vladd55

    Vladd55 Новичок

    С нами с:
    11 дек 2021
    Сообщения:
    88
    Симпатии:
    1
    Добрый день!

    Есть табы, в одном из которых имеется декоративный чекбокс. Вот рабочий фрагмент кода:

    HTML:
    1.        
    2. <div class="tab-wrapper">
    3. <input type="radio" name="tab" id="tab2" />
    4.         <label class="tab-label no-select" for="tab2" nth="2">Интро</label>
    5.         <div class="tab-item" id="tab-content2">
    6. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
    7. <div id="consent">
    8. <input type="checkbox" id="demo2">
    9. <label for="demo2" data-on-label="Да" data-off-label="Нет"></label> Запретить публикацию года
    10. </div>
    11.         </div>
    Код (CSS):
    1. /* Организация вкладок (табов) */
    2.  
    3. .tab-container{
    4.   background-color: #125688;
    5.   border-radius: 3px;
    6.   overflow: hidden;
    7. }
    8. .tab-title{
    9.   font-family: sans-serif;
    10.   color: #fff;
    11.   margin: 10px;
    12.   font-weight: normal;
    13.   font-size: 18px;
    14.   text-align: center;
    15. }
    16. .tab-wrapper{
    17.     width: 100%;
    18.     overflow-x: scroll;
    19.     display: flex;
    20.     flex-wrap: wrap;
    21.     align-items: flex-start;
    22.     justify-content: flex-start;
    23.     font-family: sans-serif;
    24. }
    25. .tab-wrapper .tab-item,
    26. .tab-wrapper input{display: none;}
    27. .tab-wrapper .tab-item{
    28.     background-color: #fff;
    29.     width: 100%;
    30.     padding: 20px;
    31.     order: 1;
    32.   }
    33. .tab-wrapper label{
    34.     line-height: 35px;
    35.     padding: 0px 10px;
    36.     text-align: center;
    37.     color: #fff;
    38.     flex-grow: 1;
    39.     cursor: pointer;
    40. }
    41. .no-select{
    42.     background-color: burlywood;
    43.     -webkit-user-select: none;
    44.     -moz-user-select: none;
    45.     -ms-user-select: none;
    46. }
    47. .tab-wrapper input:checked + label{
    48.     border: 3px solid #caeafb;
    49.     background-color: #ef8a37;
    50.     border-radius: 10px;
    51. }
    52. .tab-wrapper input:checked + label + .tab-item{display: block;}
    53.  
    54.  
    55. .form-block {display:block;}
    56.  
    57.  
    58. /* Чекбокс для формы */
    59.  
    60. #consent label {    margin: 2em;}
    61. #consent input {    display: none;}
    62. #consent input+label,
    63. #consent input+label::before,
    64. #consent input+label::after {
    65.     -webkit-transition: all .2s;
    66.     transition: all .2s;
    67. }
    68. #consent input+label {
    69.     display: inline-block;
    70.     position: relative;
    71.     width: 130px;
    72.     height: 50px;
    73.     border-radius: 25px;
    74.     cursor: pointer;
    75. }
    76. #consent input+label::before {
    77.     display: block;
    78.     content: attr(data-off-label);
    79.     position: absolute;
    80.     top: 15px;
    81.     right: 10px;
    82.     color: #fff;
    83.     font-family: Arial, sans-serif;
    84.     font-size: 18px;
    85. }
    86. #consent input+label::after {
    87.     content: '';
    88.     position: absolute;
    89.     top: 2px;
    90.     left: 2px;
    91.     width: 44px;
    92.     height: 44px;
    93.     background-color: #fff;
    94.     border-radius: 50%;
    95. }
    96. #consent input:checked+label::before {
    97.     content: attr(data-on-label);
    98.     left: 14px;
    99.     right: auto;
    100.     color: #fff;
    101. }
    102. #consent input:checked+label::after {
    103.     left: 83px;
    104.     background-color: #f7f7f7;
    105. }
    106.  
    107.  
    108. #consent #demo2+label { background-color: #e74c3c; }
    109. #consent #demo2:checked+label {    background-color: #1abc9c; }
    Как я понимаю, строка
    Код (CSS):
    1. .tab-wrapper input:checked + label
    а также строка
    Код (CSS):
    1. .tab-wrapper label {
    (в посте это строки 33 и 47) должны действовать только на табы. А на чекбокс, обернутый в #consent, их действие не должно распространяться. Но на практике обе упомянутые строки "пролезают" в настройки чекбокса.

    Как-то мне нужно сделать, что бы .tab-wrapper label не распространялось на #consent label
     
    #1 Vladd55, 13 апр 2023
    Последнее редактирование: 13 апр 2023