Граница между метками флажков, когда ввод скрыт - PullRequest
Новая
       20

Граница между метками флажков, когда ввод скрыт

0 голосов

У меня есть несколько флажков, стилизованных под выбор.Я сделал это, установив для ввода значение display: none и разрешив метку в качестве единственного видимого элемента.

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

HTML: 

<div class="dropdown">
    <span class="tag">
        <span class="tag-text">Talla</span>
        <span class="tag-caret">&#9660</span> 
    </span>
    <div class="dropdown-content">
        <input type="checkbox" name="talla[]" id="36" class="filtro">
        <label for="36" class="label">36</label>
        <br>
        <input type="checkbox" name="talla[]" id="37" class="filtro">
        <label for="37" class="label">37</label>
        <br>
        <input type="checkbox" name="talla[]" id="38" class="filtro">
        <label for="38" class="label">38</label>
        <br>
    </div>
</div>

CSS для части, которую я прошу: 

input[type="checkbox"]
            {            
                display:none;
            }

label
        {   
            padding:3px;
            margin:10px;
            border:1px solid lightslategrey;
            border-radius: 1px;
        }

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Я предлагаю вам обернуть checkboxes и labels с помощью div вместо того, чтобы делать <br> и добавить нижнее поле к этим divs

input[type="checkbox"]
            {            
                display:none;
            }

label
        {   
            padding:3px;
            border:1px solid lightslategrey;
            border-radius: 1px;
        }
.checkbox-wrapper{
  margin-bottom: 10px;
}
<div class="dropdown">
    <span class="tag">
        <span class="tag-text">Talla</span>
        <span class="tag-caret">&#9660</span> 
    </span>
    <div class="dropdown-content">
      <div class="checkbox-wrapper">
        <input type="checkbox" name="talla[]" id="36" class="filtro">
        <label for="36" class="label">36</label>
      </div>
      <div class="checkbox-wrapper">
        <input type="checkbox" name="talla[]" id="37" class="filtro">
        <label for="37" class="label">37</label>
      </div>
      <div class="checkbox-wrapper">
        <input type="checkbox" name="talla[]" id="38" class="filtro">
        <label for="38" class="label">38</label>
      </div>
    </div>
</div>
0 голосов
/ 29 мая 2018

Используйте visibility: hidden; вместо display:none

input[type="checkbox"]
            {            
              visibility: hidden;
            }

label
        {   
            padding:3px;
            margin:10px;
            border:1px solid lightslategrey;
            border-radius: 1px;
        }
<div class="dropdown">
    <span class="tag">
        <span class="tag-text">Talla</span>
        <span class="tag-caret">&#9660</span> 
    </span>
    <div class="dropdown-content">
        <input type="checkbox" name="talla[]" id="36" class="filtro">
        <label for="36" class="label">36</label>
        <br>
        <input type="checkbox" name="talla[]" id="37" class="filtro">
        <label for="37" class="label">37</label>
        <br>
        <input type="checkbox" name="talla[]" id="38" class="filtro">
        <label for="38" class="label">38</label>
        <br>
    </div>
</div>
...