Có cần JavaScript không?

Không, được triển khai chỉ với CSS. Sử dụng bộ chọn :checked và phần tử label.

Có hỗ trợ trợ năng không?

Có, input[type="checkbox"] được giữ nguyên, vì vậy trình đọc màn hình nhận ra nó chính xác.

Có thể dùng trong biểu mẫu không?

Có, nó hoạt động như phần tử biểu mẫu HTML chuẩn, vì vậy giá trị được gửi bình thường.

Dữ liệu của tôi có an toàn không?

Có, tất cả quá trình xử lý được thực hiện trên trình duyệt của bạn.

Tạo Hộp Kiểm CSS

Tạo hộp kiểm CSS tùy chỉnh với trình chỉnh sửa trực quan. Tự do tùy chỉnh hoạt ảnh, màu sắc và hình dạng.

Cài Đặt Trước

Kích Thước: 24px

Bán Kính Góc: 50%

Màu Đã Chọn

#6366f1

Màu Chưa Chọn

#ffffff

Màu Viền

#d1d5db

Xem Trước

Option AOption BOption C

Mã HTML

<label class="custom-checkbox">
    <input type="checkbox" />
    <span class="checkmark"></span>
    Label text
</label>

Mã CSS

.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    font-size: 14px;
    color: #374151;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox .checkmark {
    position: relative;
    height: 24px;
    width: 24px;
    background-color: #ffffff;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.custom-checkbox:hover .checkmark {
    border-color: #6366f1;
}

.custom-checkbox input:checked + .checkmark {
    background-color: #6366f1;
    border-color: #6366f1;
}

.custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked + .checkmark::after {
    display: block;
}

Chia sẻ công cụ