CSS3 实现 checkbox 变按钮
html 如下
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>
- css3实现checkbox变按钮
- </title>
- </head>
- <body>
- <div class='search_checkbox'>
- 高级检索:
- <input type='checkbox' id='switch'>
- <label for='switch'>
- 高级检索
- </label>
- </div>
- </body>
- </html>
css 如下
- .search_checkbox{
- margin: 0;
- padding: 0;
- margin-left: 15px;
- display: inline-block;
- height: 30px;
- padding-top: 12px;
- }
- .search_checkbox input[type=checkbox]{
- height: 0px;
- width: 0px;
- visibility: hidden;
- }
- .search_checkbox label{
- cursor: pointer;
- height: 20px;
- border-radius: 10px;
- display: inline-block;
- background-color: gray;
- width: 40px;
- text-indent: -99999px;
- position: relative;
- }
- .search_checkbox label::before {
- content: '';
- display:inline-block;
- background-color: white;
- height: 15px;
- width: 15px;
- position: absolute;
- top: 2.5px;
- left: 2.5px;
- border-radius: 7px;
- transition:0.3s;
- }
- .search_checkbox input:checked + label {
- background: #bada55;
- }
- .search_checkbox input:checked + label:before {
- left: calc(100% - 2.5px);
- transform: translateX(-100%);
- }
- .search_checkbox label:active:before{
- width:20px;
- }
如有疑问请回复。
来源: http://www.cnblogs.com/ivanlee-ee-233/p/6777833.html