CSS - что-то не так с индексами переключателей - PullRequest
Новая
       37

CSS - что-то не так с индексами переключателей

0 голосов
/ 27 апреля 2020

Небольшая проблема с выбором радиокнопок. Я ожидал, что выбор кнопок будет работать без каких-либо проблем, так как я ничего не сделал для изменения индексации кнопок. Я не знаю почему, но кнопка перед нажатой кнопкой выбирается вместо самой нажатой кнопки. Как будто все кнопки в индексах испорчены. Пожалуйста, запустите фрагмент ниже и посмотрите, сможете ли вы указать мне правильное направление. 

.frame{
  background-color:#406bd8;
  display:flex;
  width:600px;
  justify-content:center;
  align-items:center;
  height:200px;
  margin:0 auto;
}

.radio-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0;
  width:40%
}

.label{
  display:inline-block;
  border:1px solid #eee;
  padding:1em;
  border-radius:100%;
  width:1em;
  height:1em;
  text-align:center;
  cursor:pointer;
  color:#eee;
  position:relative;
  z-index:1;
}
.label:hover{
  background-color:#658ae8;
}
.label:before{
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  background-color:#eee;
  border-radius:inherit;
  top:0;
  left:0;
  transform:scale(0);
  transition:transform .5s ease-in-out;
  transition-origin:center;
  z-index:-1;
}

.number{
  opacity:0;
  position:fixed;
  width:0;
}


.number:checked+.label{
  color:#406bd8;
}

.number:checked+.label:before{
  transform:scale(1);
}
  
  <div class="frame">
    <div class="radio-bar">  
 
<label for='input1' class='label'>1</label>
<input type='radio' name='radios' id='input1' class="number" checked>
    
<label for='input2' class='label'> 2</label>
 <input type='radio' name='radios' id='input2' class="number">
  
<label for="input3" class='label'>3</label>
<input type='radio' name='radios' id='input3'class="number">
  
<label for="input4" class='label'>4</label>
<input type='radio' name='radios' id='input4'class="number">

    </div>
  </div>

Ответы [ 2 ]

2 голосов
/ 27 апреля 2020

Это из-за вашего селектора .number: checked + .label В вашем коде html ввод идет после метки, но в вашем css вы спрашиваете противоположное 

<div class="frame">
    <div class="radio-bar">  
        <input type='radio' name='radios' id='input1' class="number" checked>
        <label for='input1' class='label'>1</label>

        <input type='radio' name='radios' id='input2' class="number">
        <label for='input2' class='label'> 2</label>
    </div>
</div>
1 голос
/ 27 апреля 2020

соседний братский комбинатор (+) выберет родного брата, только если он сразу после первого элемента.

Чтобы решить вашу проблему, измените порядок ваших элементов, так что вход предшествует метке: 

.frame{
  background-color:#406bd8;
  display:flex;
  width:600px;
  justify-content:center;
  align-items:center;
  height:200px;
  margin:0 auto;
}

.radio-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0;
  width:40%
}

.label{
  display:inline-block;
  border:1px solid #eee;
  padding:1em;
  border-radius:100%;
  width:1em;
  height:1em;
  text-align:center;
  cursor:pointer;
  color:#eee;
  position:relative;
  z-index:1;
}
.label:hover{
  background-color:#658ae8;
}
.label:before{
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  background-color:#eee;
  border-radius:inherit;
  top:0;
  left:0;
  transform:scale(0);
  transition:transform .5s ease-in-out;
  transition-origin:center;
  z-index:-1;
}

.number{
  opacity:0;
  position:fixed;
  width:0;
}


.number:checked+.label{
  color:#406bd8;
}

.number:checked+.label:before{
  transform:scale(1);
}
<div class="frame">
    <div class="radio-bar">  
 
    <input type='radio' name='radios' id='input1' class="number" checked>
    <label for='input1' class='label'>1</label>

     <input type='radio' name='radios' id='input2' class="number">
    <label for='input2' class='label'> 2</label>

    <input type='radio' name='radios' id='input3'class="number">
    <label for="input3" class='label'>3</label>

    <input type='radio' name='radios' id='input4'class="number">
    <label for="input4" class='label'>4</label>

    </div>
  </div>
...