Thay đổi hình ảnh của checkbox thật đơn giản với CSS3

08/07/2014
2504
0

Checkbox là một thành phần không thể thiếu trong mỗi website. Chúng tôi sẽ giới thiệu cách để làm cho nó trở nên nổi bật và bắt mắt hơn thông qua bài viết này.

Trong mỗi website, hầu như luôn có sự xuất hiện của những checkbox. Bạn có cảm thấy chán với kiểu hiển thị mặc định của nó hay không? Sao chúng ta không cùng nhau thay đổi một chút nhỉ, nó sẽ tăng thêm vẻ đẹp cho website của bạn khá nhiều đấy.

checkbox 1

Hãy đến với một nút bấm be bé xinh xinh nào.

Cơ bản sẽ vẫn là phần tử .switch. Trong phần tử này, chúng ta sẽ đặt checkbox và nhãn lên đầu của cái khác để làm chút ảo thuật ở đây. Input không có bất cứ thứ gì ngoài checkbox type (không ID, tên, không có gì khác..).

1

2

3

4

<div class="switch">
    <input type="checkbox">
    <label></label>
</div> 

Và yếu tối cuối cùng có thể là bất kì thứ gì (anchor, div, span, label, bold tag.....). Cá nhân tôi thì chọn label vì tôi thường sử dụng chúng khi hack checbox, nó yêu cầu sử dụng label.

CSS

Đầu tiên, chúng tôi đặt kích thước cho button bằng cách thiết lập chiều rộng và chiều cao của nó. Hãy chắc chắn rằng chiều rộng bằng chiều cao, hoặc button của bạn sẽ không trở thành hình tròn. Nhớ để ẩn checkbox với mã CSS giống như đầu bài viết đã nói.

1

2

3

4

5

.switch {
    width: 100px;
    height: 100px;
    position: relative;
}

Sau đó, label là nơi chúng ta sẽ xử lý tiếp theo. Trước hết, chúng ta đặt nó ở dạng khối và làm cho nó lấp đầy container. Sau đó, chúng tôi đặt nó vào một vị trí tương đối để đặt vào các yếu tố pseudo-elements sau này.

Đến lúc cho một số phong cách thực sự rồi đây: Một màu nền, một hình tròn, một chút đổ bóng để làm nó nổi lên.

.switch label {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    background: #eaeaea;
    box-shadow: 
        0 3px 5px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -5px 5px rgba(100,100,100,0.1),
        inset 0 5px 5px rgba(255,255,255,0.3);
}

Nó nhìn tương đối ổn rồi đấy, nhưng mà chúng ta vẫn nên thêm một số pseudo-elements để nó trở nên tuyệt vời hơn, phải không?

Điều đầu tiên là để cải thiện độ nổi của bút bằng cách thêm vào một lớp viền phía ngoài. Vì vậy, chúng ta cần đặt nó vào vị trí tuyệt đối, đằng sau nút và chúng ta không cần thiết lập kích thước cho nó nhưng cần đặt vào các giá trị thay thế như top/right/bottom/left.

.switch label:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -8%; 
    right: -8%; 
    bottom: -8%; 
    left: -8%;
    border-radius: inherit;
    background: #ddd; /* Fallback */
    background: linear-gradient(#ccc, #fff);
    box-shadow: 
        inset 0 2px 1px rgba(0,0,0,0.15),
        0 2px 5px rgba(200,200,200,0.1);
}

Rồi, nút đã xong. Giờ là đến phần đèn. Về cơ bản, nó là một vòng tròn nhỏ đặt giữa nút. Đổ bóng một chút cho nó là xong.

.switch label:before {
    content: "";
    position: absolute;
    width: 20%;
    height: 20%; 
    left: 40%;
    top: 40%;
    border-radius: inherit;
    background: #969696; /* Fallback */
    background: radial-gradient(40% 35%, #ccc, #969696 60%);
    box-shadow:
        inset 0 2px 4px 1px rgba(0,0,0,0.3),
        0 1px 0 rgba(255,255,255,1),
        inset 0 1px 0 white;
}

Chúng ta đã có một nút bấm với đèn tương đối đẹp rồi đấy. Giờ là đến phần xử lý tình trạng kiểm tra. Khi bạn click vào container, bạn kích hoạt checkbox, có nghĩa là bạn đã sử dụng đến trạng thái :checked và trạng thái lựa chọn. Vì vậy, khi nút được bật, chúng ta cần thay đổi màu nền của đèn LED và tất nhiên là cả nền của button nữa. Về cơ bản là thế!

.switch input:checked ~ label { /* Button */
    background: #e5e5e5; /* Fallback */
    background: linear-gradient(#dedede, #fdfdfd);
}
 
.switch input:checked ~ label:before { /* LED */
    background: #25d025; /* Fallback */
    background: radial-gradient(40% 35%, #5aef5a, #25d025 60%);
    box-shadow:
        inset 0 3px 5px 1px rgba(0,0,0,0.1),
        0 1px 0 rgba(255,255,255,0.4),
        0 0 10px 2px rgba(0, 210, 0, 0.5);
}

Trên đây là toàn bộ công đoạn của việc tạo một nút bấm giả trên website. Mong rằng với bài viết này, bạn sẽ học thêm được một sô thứ trong CSS và sử dụng chúng một cách linh hoạt hơn. Trước khi rời khỏi đây, bạn có thể xem qua Series 11 kĩ thuật CSS3 cơ bản(Phần I) để hiểu rõ thêm những kỹ thuật mà chúng ta đã cùng nhau sử dụng trong bài viết này.

Ý kiến bạn đọc

Bạn cần trở thành thành viên của nhóm để có thể bình luận bài viết này. Nhấn vào đây để đăng ký làm thành viên nhóm!

Thay đổi hình ảnh của checkbox thật đơn giản với CSS3

Bài viết liên quan

Đăng nhập Đăng ký