Tất cả các bài viết. CSS3Phần 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%;
}Phần HTML Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?
CSS3 Xem (3008) Học thiết kế web Phần 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%;
}Phần HTML Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online? Chắc chắn là khi bạn làm giao diện web sẽ gặp nhiều thiết kế có các nút như hộp kiểm hoặc là đài phát thanh về các lựa chọn như chọn giới tính hoặc các sở thích. Tuy nhiên, nó không phải là một hộp kiểm hay đài phát thanh bình thường khi chúng ta sử dụng 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%;
}9, mà là một dạng nào đó khác như nút Chuyển đổi giao diện Chế độ tối của trang web mình chẳng hạnThì hôm nay mình sẽ hướng dẫn các bạn không chỉ về cách làm mà là về nguyên lý hoạt động của hộp kiểm tùy chỉnh nữa để các bạn có thể hiểu cách nó hoạt động như thế nào mà có thể tùy biến thoải mái về sau cho các UI . Bắt đầu hủy nào Ở đây mình sẽ hướng dẫn các bạn tạo ra một cái Toggle giống chỗ tùy biến giao diện Dark Mode của blog mình nha. Đầu tiên mình sẽ tạo HTML như sau <label class="toggle" for="toggle"> <input type="checkbox" id="toggle"> <div class="slider"></div> </label> Ở nhãn thẻ mình sử dụng thuộc tính là Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?0 truyền vào là chuyển đổi nghĩa là con trỏ tới ID nha và ID ở đây là cái đầu vào có loại là hộp kiểm ở bên trong có id=”toggle” á, các bạn khi làm việc với form sẽ thấy thẻ . Dấu + trong CSS là cùng cấp nằm gần nhau ví dụ ở HTML trên là thẻ Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?4 trỏ tới thẻ .toggle {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.toggle input[type="checkbox"] {
display: none;
}
.toggle .slider {
background-color: #ccc;
cursor: pointer;
width: 100%;
height: 100%;
transition: .4s;
position: relative;
border-radius: 50px;
}0 hen. Tí nữa code CSS các bạn sẽ thấy ngay. Lúc này giao diện ta có tạm thời như sau với một hộp kiểm bình thường Lúc này mình sẽ code thêm CSS một chút cho nó nhìn oke hơn như sau .toggle {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.toggle input[type="checkbox"] {
display: none;
}
.toggle .slider {
background-color: #ccc;
cursor: pointer;
width: 100%;
height: 100%;
transition: .4s;
position: relative;
border-radius: 50px;
}Mình thiết lập chiều cao và chiều rộng cho cái hộp kiểm tùy chỉnh này là 34px và 60px, sau đó mình ẩn cái input[type=”checkbox”] đi bằng .toggle {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.toggle input[type="checkbox"] {
display: none;
}
.toggle .slider {
background-color: #ccc;
cursor: pointer;
width: 100%;
height: 100%;
transition: .4s;
position: relative;
border-radius: 50px;
}3 và . Pause this time we haveKhá hơn được một chút rồi, việc tiếp theo là tạo ra một cái hình tròn bên trong, chúng ta sẽ dùng pseudo class .toggle {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.toggle input[type="checkbox"] {
display: none;
}
.toggle .slider {
background-color: #ccc;
cursor: pointer;
width: 100%;
height: 100%;
transition: .4s;
position: relative;
border-radius: 50px;
}5 để tạo, nếu bạn nào chưa biết về before after thì có thể tìm hiểu thêm tại đây. CSS của mình và có kết quả như hìnhBạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?1 Đến đây chắc các bạn cũng đã hiểu rồi hen, nếu bạn nào chưa hiểu thì mình xin lý giải cách hoạt động nhé. Chúng ta ẩn input[type=”checkbox”] đi bằng .toggle {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.toggle input[type="checkbox"] {
display: none;
}
.toggle .slider {
background-color: #ccc;
cursor: pointer;
width: 100%;
height: 100%;
transition: .4s;
position: relative;
border-radius: 50px;
}3 nhưng nó vẫn hiển thị trên HTML vì thế khi bạn nhấn vào nhãn, nhờ Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?0 mà nó trỏ tới input[type=”checkbox”] có ID đang chuyển đổi . Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?7 Với hướng phân tích kỹ càng thì chúng ta có code as on và tất nhiên sẽ có kết quả như mong đợi nhé. Trước khi kết thì mình sẽ giải thích cho các bạn kỹ hơn một chút, vì ban đầu mình thiết lập cái bật tắt này có chiều cao là 34px thì khi mình làm cái hình tròn ở Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?12 là 26px thì mình có CSS là Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?13 và Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?14 thì Và khi nhấn vào hộp kiểm thì mình có sử dụng Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?18 thì là vì chiều rộng của chuyển đổi là 60px trừ đi 4px nhân 2 bên là 8px thì còn là 52px mà bản thân hình tròn đã là 26px rồi thì lúc này Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?19 nữa sẽ là 52px đúng không? Một điều nữa là tại sao không dùng Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?70 trong trường hợp này là vì hộp kiểm thì có thể chọn rồi bỏ chọn còn radio thì không, radio thường dùng khi chọn một trong 2, hoặc 1 trong nhiều và chỉ chọn 1 cái mà thôi chứ chứ Nhiều bạn hỏi là mình thấy người ta làm ra dấu tích màu trắng nền xanh khá đẹp thì nguyên lý làm cũng như cách mình chia sẻ ở trên nhưng style CSS khác đi thôi. Dấu tích thì nguyên lý của nó là một hình chữ nhật trong suốt có Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?71 và Bạn có muốn học Khóa học Chuyên Viên Website Lành Nghề Online?72 sau đó xoay khoảng 45 độ là ra dấu đánh dấu rồi Như vậy là xong, hi vọng với bài viết này sẽ giúp các bạn hiểu được cách hộp kiểm tùy chỉnh hoạt động như thế nào để từ đó có thể tự làm ra được nhiều hộp kiểm tùy chỉnh hoặc đài phát thanh khác hoặc có thể hiểu được các đoạn mã . Cuối cùng thì xin chúc các bạn một ngày tốt lành và mạnh mẽ |
