Question

我有一些复选框样式看起来像一个选择。我通过将输入设置为display：none并将标签作为唯一可见元素来完成此操作。

问题是我希望元素之间有一些余量，但只有当复选框可见时它才会起作用。

HTML：

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

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

我要求的部分的CSS：

Item

Answer 1

使用visibility: hidden; 代替 display:none

＆＃13;

input[type="checkbox"]
            {            
              visibility: hidden;
            }

label
        {   
            padding:3px;
            margin:10px;
            border:1px solid lightslategrey;
            border-radius: 1px;
        }

＆＃13;

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

＆＃13;

Answer 2

我建议你使用div来代替checkboxes和labels而不是<br>并将余量底部添加到那些divs

＆＃13;

input[type="checkbox"]
            {            
                display:none;
            }

label
        {   
            padding:3px;
            border:1px solid lightslategrey;
            border-radius: 1px;
        }
.checkbox-wrapper{
  margin-bottom: 10px;
}

＆＃13;

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

＆＃13;

复选框之间的保证金＆＃39;隐藏输入时的标签

2 个答案: