Toggle Switchy is a pure CSS library that converts the native checkbox inputs into responsive, accessible, Search engine optimization-friendly toggle switches with customized kinds, sizes, colors, labels, and extra. A pure CSS toggle switch for form input checkboxes.
css toggle switch with text, simple css toggle switch, switch button css, toggle button css, css only toggle switch, css toggle switch with two labels
Features
- CSS only – no JavaScript!
- No dependencies
- Fully responsive
- Fully customizable
- Fully self-contained
- 7 color schemes
- Labels on the left and the right
- Keyboard Accessible – accessibility (a11y)
- Focus Styles – accessibility (a11y)
- Supports all modern browsers
- Search engine friendly
- Screen reader-friendly
- Doesn’t dump a bunch of global styles that’ll screw with your other CSS
Minimalist Toggle Utility Using JavaScript | Lux Toggle
How to make use of it:
1. Just obtain and insert the stylesheet toggle-switchy.css into the doc and completed it.
<link href="toggle-switchy.css" rel="stylesheet">
2. Markup the HTML to create a primary toggle swap.
<label class="toggle-switchy" for="example" data-size="">
<input checked="" type="checkbox" id="example">
<span class="toggle">
<span class="switch"></span>
</span>
</label>3. Specify the switch size within the data-size attribute:
<label class="toggle-switchy" for="example" data-size="xl">
<input checked="" type="checkbox" id="example">
<span class="toggle">
<span class="switch"></span>
</span>
</label>
<label class="toggle-switchy" for="example" data-size="lg">
<input checked="" type="checkbox" id="example">
<span class="toggle">
<span class="switch"></span>
</span>
</label>
<label class="toggle-switchy" for="example" data-size="sm">
<input checked="" type="checkbox" id="example">
<span class="toggle">
<span class="switch"></span>
</span>
</label>
<label class="toggle-switchy" for="example" data-size="ms">
<input checked="" type="checkbox" id="example">
<span class="toggle">
<span class="switch"></span>
</span>
</label>4. Make the border rounded to create an iOS-style toggle switch.
<label class="toggle-switchy" for="example" data-size="xl" data-style="rounded">
<input checked="" type="checkbox" id="example">
<span class="toggle">
<span class="switch"></span>
</span>
</label>5. Create an sq. toggle switch.
<label class="toggle-switchy" for="example" data-size="xl" data-style="square">
<input checked="" type="checkbox" id="example">
<span class="toggle">
<span class="switch"></span>
</span>
</label>6. Hide the on/off textual content within the toggle switch.
<label class="toggle-switchy" for="example" data-size="xl" data-text="false">
<input checked="" type="checkbox" id="example">
<span class="toggle">
<span class="switch"></span>
</span>
</label>7. Add customized labels to the toggle switch.
<label class="toggle-switchy" for="example" data-size="lg">
<input checked="" type="checkbox" id="example">
<span class="toggle">
<span class="switch"></span>
</span>
<span class="label">Label on right</span>
</label>
<label class="toggle-switchy" for="example" data-size="lg" data-label="left">
<input checked="" type="checkbox" id="example">
<span class="toggle">
<span class="switch"></span>
</span>
<span class="label">Label on left</span>
</label>8. Change the background shade utilizing the data-color attribute:
<label class="toggle-switchy" for="example" data-size="lg" data-color="red">
<input checked="" type="checkbox" id="example">
<span class="toggle">
<span class="switch"></span>
</span>
</label>Options
| Option | Data Attribute |
|---|---|
| Rounded | data-style="rounded" |
| Square | data-style="square" |
| No Text | data-text="false" |
| Disabled | add the disabled attribute to the input tag |
| Checked | add the checked attribute to the input tag |
| Sizes | data-size="xl"data-size="lg"medium (default) data-size="sm"data-size="xs" |
| Colors | data-color="red"data-color="orange"data-color="yellow"data-color="green"data-color="blue"data-color="purple"data-color="gray" |
| Labels | data-label="left"label on right (default) |
Create Custom Switches With Checkboxes, CSS Toggle Switch With Text, Custom Checkbox Switch CSS, How to Make Custom Buttons
See Demo And Download
Official Website(adamculpepper): Click Here
This superior jQuery/javascript plugin is developed by adamculpepper. For extra Advanced Usages, please go to the official website.
