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
Switchery is a free standalone Javascript library. To install it, you just need to include the Switchery JavaScript and the Style file in your Web. You can get both files from GitHub. To convert your checkbox to the old way, simply insert your checkbox element into a class referenced on 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.
At the moment, the checkbox does not change yet. We must always insert the following JavaScript code into the HTML code. Here we define the defined checkbox class and give some options (if necessary).
Adjust the switch
Give an Option, this can be done in JavaScript. This option allows you to change the appearance of the default switch. Below you will find all the available options:
- 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.
Conclusion
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.