HTML Checkbox Into iOS 7 Switch
The checkbox is very useful for providing user input. When users enter the actual value, a check mark appears in the small square box. Customize the appearance of the checkbox can be done simply via CSS. Nevertheless, the customization only affects the style of the boxes and checkboxes. To customize the checkbox with a really different design, a little coding is necessary.
However, with the help of Switchery, customizing the checkboxes is a breeze. It is able to automatically transform your checkbox item into a nice iOS7 type switch button. The switches can also be perfectly adapted to your design.
Getting started with Switchery
It is also very easy to give the checkbox the initial state. You can do this by inserting the checked Attribute in HTML for the checked status on the first load. For example, we will put a demo class in a checkbox with The status enabled.
Adjust the switch
- color: To change the color of the switching element, use hexadecimal or RGB values
- Secondary Color: Allows you to change the “OFF” state color of the shadow and the frame of the switch
- Class Name: Customize the name of the Switch element class in Switchery.CSS
- Disabled: Enables or disables the switch during boolean-filled click events (true or false)
- Disable opacity: Allows you to change the opacity of the switch if disabled is true, in the range from 0 to 1
- Speed: Change the length of the transition time, for example ‘0.1s’, ‘0.5s’, ‘2.2s’
Instead of simply customizing the state design, there are still many options available, such as displaying multiple switches or linking the switch to other elements and retrieving its current state. As always, the documentation page is a useful place to visit.
With a tool like Switchery, it is becoming easier and easier to customize any type of design from any device. In addition, it has been tested and is supported by many modern browsers such as Chrome, Firefox, Opera, Safari and IE8+. If you want to customize another iOS 7-style UI Widget theme, you can try Powerange for range slider control.