how to join two table in codeigniter easily[updated] | ci_model | ci_controller | codeigniter 3 -datainflow
In this tutorial I will help you how to create switch checkbox in your HTML page. You can design a check box and give a look in your check box like a toggle switch using CSS in a simple HTML page.
A flip toggle switch checkbox create process:
- Create a simple HTML page.
- Create a label and give label class name and set label display: inline-block using CSS.
- Define a input checkbox and set input display:none using input class.
- Now using span for checked.
I will provide you source code in the example of this tutorial. Follow the example and source code.
HTML Code:
<!DOCTYPE html> <html> <head> <title>Switch Checkbox</title> </head> <body> <h2 align="center">Switch Checkbox</h2> <div style="text-align: center;"> <label class="chk-switch"> <input type="checkbox"> <span class="chk-slider"></span> </label> <label class="chk-switch"> <input type="checkbox" checked> <span class="chk-slider"></span> </label> </div> </body> </html>
CSS Code:
<style> .chk-switch { position: relative; display: inline-block; width: 85px; height: 35px; } .chk-switch input {display:none;} .chk-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .chk-slider:before { position: absolute; content: ""; height: 25px; width: 25px; left: 10px; bottom: 5px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .chk-slider { background-color: #2196F3; } input:checked + .chk-slider:before { -webkit-transform: translateX(42px); -ms-transform: translateX(42px); transform: translateX(42px); } /* sliders */ .chk-slider{ border-radius: 50px; } .chk-slider:before { border-radius: 60%; } </style>
Related posts