隐藏输入时复选框标签之间的边距

Question

我有一些复选框样式看起来像 select。我通过将输入设置为 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;
        }

Answer 1

使用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>

Answer 2

我建议你用 div 包裹 checkboxes 和 labels 而不是 <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>

隐藏输入时复选框标签之间的边距

Margin between checkboxes' labels when the input is hidden

html

css

checkbox

input

margin