mardi 29 mai 2018

Margin between checkboxes' labels when the input is hidden

I have some checkboxes styled to look like a select. I did this by setting the input to display:none and letting the label as the only visible element.

The problem is that I want some margin between the elements but it only seems to work when the checkbox is visible.

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 for the part I ask for:

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

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




Aucun commentaire:

Enregistrer un commentaire