fuelux
Version:
Base Fuel UX styles and controls
49 lines (41 loc) • 1.44 kB
HTML
<html lang="en">
<head><title>Sample Markup</title></head>
<body>
<div id="MyCheckboxContainer">
<div id="CheckboxCheckedEnabled" class="checkbox">
<label class="checkbox-custom">
<input class="sr-only checked" type="checkbox" checked="checked" id="Checkbox1" />
<span class="checkbox-label">Checked/Enabled</span>
</label>
</div>
<div id="CheckboxCheckedDisabled" class="checkbox">
<label class="checkbox-custom">
<input class="sr-only checked" type="checkbox" checked="checked" disabled="disabled" />
<span class="checkbox-label">Checked/Disabled</span>
</label>
</div>
<div id="CheckboxUncheckedEnabled" class="checkbox">
<label class="checkbox-custom">
<input class="sr-only checked" type="checkbox" />
<span class="checkbox-label">Unchecked/Enabled</span>
</label>
</div>
<div id="CheckboxUncheckedDisabled" class="checkbox">
<label class="checkbox-custom">
<input class="sr-only checked" type="checkbox" disabled="disabled" />
<span class="checkbox-label">Unchecked/Disabled</span>
</label>
</div>
<div id="CheckboxToggle">
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" class="sr-only" data-toggle=".checkboxToggle" />
Custom checkbox toggles by class
</label>
</div>
<div class="checkboxToggle hidden">This message's visibility toggles by class with a checkbox above.</div>
</div>
</div>
</body>
</html>