Kỹ thuật css cho checkbox input đẹp hơn

05/05/2023 10:32 310

Table of Contents

Kỹ thuật css cho checkbox input đẹp hơn

Vâng mặc định checkbox input trông rất xấu vì thế mà theo thiết kế thì đòi hỏi chúng ta phải làm đúng như thiết kế ví dụ như hình dưới đây chẳn hạn, anh chỉ sẽ thấy khi người dùng check thì nó sẽ có màu đỏ và dấu check màu trắng đúng không, nếu như măc định input checkbox rất khó để làm điều này vì thế tôi mới gọi là “Kỹ thuật css cho checkbox input đẹp hơn”, ngay sau đây chúng ta sẽ đi tìm hiểu nhé

Mã html

anh chị cần chú ý là id=”sendItToSomeoneElse” và for=”sendItToSomeoneElse” cần phải giống nhau

<div class="col-xs-12 pd-0 checkbox sendItToSomeoneElse">
<input type="checkbox" id="sendItToSomeoneElse" name="sendItToSomeoneElse" value="1"> <label for="sendItToSomeoneElse" style="cursor: pointer;">Bạn muốn Shop giúp bạn gửi Tặng cho người khác?</label>

</div>

<input type="checkbox" id="sendItToSomeoneElse" name="sendItToSomeoneElse" value="1"> <label for="sendItToSomeoneElse" style="cursor: pointer;">Bạn muốn Shop giúp bạn gửi Tặng cho người khác?</label>

</div>

Mã css

.checkbox.sendItToSomeoneElse label {
    margin: 0;
    color: #333;
}


.checkbox.sendItToSomeoneElse input[type=checkbox]:checked+label:before {
    background: #e42127;
    border: 1px solid #e42127;
}

.checkbox.sendItToSomeoneElse input[type=checkbox]+label:before {
    border: 1px solid #2a3038;
    border-radius: 2px;
    box-sizing: border-box;
    content: "";
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin-right: 7px;
    width: 20px;
    background: #fff;
    border-color: #ccc;
}

.checkbox.sendItToSomeoneElse input[type=checkbox]+label {
    align-items: center;
    display: flex !important;
    font-style: normal;
    font-weight: 500;
    /* line-height: 18px; */
    text-transform: lowercase;
    position: relative;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* color: #333; */
}

.checkbox.sendItToSomeoneElse input[type=checkbox]:checked+label:after {
    color: #fff;
    content: "\f00c";
    font-size: 10px;
    left: 5px;
    position: absolute;
    z-index: 999999999999;
    top: 50%;
    transform: translateY(-50%);
    font-family: FontAwesome !important;
}

.checkbox.sendItToSomeoneElse input[type=checkbox] {
    display: none;
}


.checkbox.sendItToSomeoneElse {
    display: flex;
    margin-bottom: 10px;
    padding: 10px 0;
    align-items: center;
}

.checkbox.sendItToSomeoneElse label {

margin: 0;

color: #333;

}

.checkbox.sendItToSomeoneElse input[type=checkbox]:checked+label:before {

background: #e42127;

border: 1px solid #e42127;

}

.checkbox.sendItToSomeoneElse input[type=checkbox]+label:before {

border: 1px solid #2a3038;

border-radius: 2px;

box-sizing: border-box;

content: "";

cursor: pointer;

display: inline-block;

height: 20px;

margin-right: 7px;

width: 20px;

background: #fff;

border-color: #ccc;

}

.checkbox.sendItToSomeoneElse input[type=checkbox]+label {

align-items: center;

display: flex !important;

font-style: normal;

font-weight: 500;

/* line-height: 18px; */

text-transform: lowercase;

position: relative;

-webkit-line-clamp: 1;

display: -webkit-box;

-webkit-box-orient: vertical;

overflow: hidden;

/* color: #333; */

}

.checkbox.sendItToSomeoneElse input[type=checkbox]:checked+label:after {

color: #fff;

content: "\f00c";

font-size: 10px;

left: 5px;

position: absolute;

z-index: 999999999999;

top: 50%;

transform: translateY(-50%);

font-family: FontAwesome !important;

}

.checkbox.sendItToSomeoneElse input[type=checkbox] {

display: none;

}

.checkbox.sendItToSomeoneElse {

display: flex;

margin-bottom: 10px;

padding: 10px 0;

align-items: center;

}

Hinh vọng với chia sẽ này sẽ giúp ích cho anh chị nào chưa biết về kỹ thuật css checkbox input này

Các bài viết khác có thể hữu ích với bạn

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Css để tăng khoản cách giữa các dot trong border [ 13/12/2022 10:16 ]
Hiệu ứng hover slide image siêu đẹp [ 26/06/2022 13:47 ]
Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
Css menu vertical danh muc đơn giản [ 20/02/2022 12:40 ]
Html và css section với title, description và card siêu đơn giản [ 17/02/2022 11:22 ]
Hiệu ứng css đẹp transform scale3d [ 10/02/2022 04:05 ]
CSS Animations hoạt động như thế nào [ 14/01/2022 03:49 ]
Cách set size image cùng kích thước không bị vỡ hình với css [ 03/01/2022 03:12 ]
Code phóng to thumbnail khi hover với CSS3 [ 02/01/2022 07:15 ]
Hiệu ứng shine css đẹp animation [ 05/10/2021 08:06 ]

Kỹ thuật css cho checkbox input đẹp hơn

Kỹ thuật css cho checkbox input đẹp hơn

Mã html

Mã css

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)