Cách tạo ô check box giống như nút trượt ngang qua lại (toggle button)
Trong phần này, baobinh.net xin được giới thiệu đến các bạn cách làm một ô check box như một nút trượt ngang qua lại ( toggle button ) mà không cần phải dùng đến javascript.
Cách làm tương đối đơn giản, mời các bạn theo dõi đoạn code dưới đây:1. Code dành cho ô checkbox:
<input id="checkbox1" type="checkbox" checked> <label for="checkbox1" data-text-true="Yes" data-text-false="No"><i></i></label> Bạn có muốn học CSS không?2. Code css:
input[type=checkbox] { display: none; } input[type=checkbox] + label { display: inline-block; background-color: #DB574D; color: white; font-family: sans-serif; font-size: 14px; font-weight: bold; height: 30px; line-height: 30px; position: relative; text-transform: uppercase; width: 80px; } input[type=checkbox] + label, input[type=checkbox] + label i { -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } input[type=checkbox]:checked + label { background-color: #67B04F; } input[type=checkbox] + label:before, input[type=checkbox] + label:after, input[type=checkbox] + label i { width: 50%; display: inline-block; height: 100%; text-align: center; } input[type=checkbox] + label:before { content: attr(data-text-true); } input[type=checkbox] + label:after { content: attr(data-text-false); } input[type=checkbox] + label i { top: 10%; background-color: white; height: 80%; left: 5%; position: absolute; width: 45%; } input[type=checkbox]:checked + label i { left: 50%; }Link xem demo: Toggle button checkbox bằng CSS3
Password giải nén: baobinh.net
Download: Tại đây
- Posted by baobinhnet
- 2015-08-27 11:39:42