radio/checkbox Variationen

Styles for radio- and checkbox-elements

Checkbox-Variants

<div class="checkbox v1">
    <input id="checkbox-1" value="1" name="checkbox-1" type="checkbox">
    <label for="checkbox-1">Checkbox v1</label>
</div>
<div class="checkbox v2">
    <input id="checkbox-2" value="3" name="checkbox-1" type="checkbox">
    <label for="checkbox-2">Checkbox v2</label>
</div>
<div class="checkbox v3">
    <input id="checkbox-3" value="3" name="checkbox-1" type="checkbox">
    <label for="checkbox-3">Checkbox v3</label>
</div>
<div class="checkbox v4">
    <input id="checkbox-4" value="4" name="checkbox-1" type="checkbox">
    <label for="checkbox-4">Checkbox v4</label>
</div>

Checkbox v1

Checkbox v2

Checkbox v3

Checkbox v4

Radio Button Variants

<div class="radio v1">
    <input id="radio-1" value="1" name="radio-boxes-1" type="radio">
    <label for="radio-1">Radio v1</label>
</div>
<div class="radio v2">
    <input id="radio-2" value="3" name="radio-boxes-1" type="radio">
    <label for="radio-2">Radio v2</label>
</div>
<div class="radio v3">
    <input id="radio-3" value="3" name="radio-boxes-1" type="radio">
    <label for="radio-3">Radio v3</label>
</div>

Radio v1

Radio v2

Radio v3