Hướng dẫn về Kiểu hộp kiểm CSS. Ở đây chúng ta thảo luận về phần giới thiệu, CSS checkbox style hoạt động như thế nào? cùng với các ví dụ tương ứng.

Bạn đang xem : cách tạo kiểu hộp kiểm css

Kiểu hộp kiểm CSS

Giới thiệu về Kiểu hộp kiểm CSS

Trong khi thiết kế các trang bằng HTML, bạn có thể muốn thay đổi kiểu của tất cả hoặc một số phần tử như hộp kiểm, nút radio, v.v. của trang. Kiểu hộp kiểm CSS là kiểu được áp dụng trong thành phần hộp kiểm của mã HTML bằng cách điều chỉnh các giá trị khác nhau của các thuộc tính để đạt được giao diện hiện đại phong phú cho thiết kế giao diện người dùng HTML của bạn, có thể hấp dẫn hơn đối với người dùng cuối, cuối cùng tăng mức độ tương tác nhiều hơn đối với trang web của bạn .

Cú pháp:

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Không có cú pháp xác định cho kiểu hộp kiểm CSS vì đây là các thông số CSS chung cần được thay đổi theo yêu cầu của bạn. Bạn có thể sử dụng mã hóa CSS bên trong & lt; style & gt; hoặc trong mã HTML bên ngoài có thể được liên kết hoặc nhập. Các thuộc tính như chiều cao, kiểu dáng, màu sắc, chiều rộng, chiều cao có thể được xác định theo yêu cầu tùy theo thiết kế.

Ví dụ:

Mã:

input [type = "checkbox"] {
chiều cao: 1,5em;
chiều rộng: 1,5em;
con trỏ: con trỏ;
vị trí: tương đối;
-webkit-chuyển đổi: .10s;
bán kính biên giới: 4em;
background-color: red;
}

Kiểu hộp kiểm CSS hoạt động như thế nào?

  • Bạn chỉ cần đề cập đến các giá trị bắt buộc theo nhu cầu của mình trong phần CSS dưới thẻ kiểu hoặc CSS bên ngoài theo cú pháp trong mã HTML của bạn để có được kiểu đó trong đầu ra.
  • Bạn có thể xem phần ví dụ có mã để biết cách bạn có thể triển khai các kiểu khác nhau của một hoặc nhiều phần tử trong mã HTML của mình bằng cách sử dụng các giá trị khác nhau của thông số trong phần CSS.

Ví dụ về Kiểu hộp kiểm CSS

Dưới đây là các ví dụ được đề cập:

Ví dụ # 1

Trong ví dụ đầu tiên, chúng ta sẽ thấy một hộp kiểm mặc định mà chúng ta thường thấy trong một trang HTML thông thường không có kiểu đặc biệt nào được liên kết với hộp kiểm này.

Mã:

& lt; html & gt;
& lt; body & gt;
& lt; h1 & gt; Bạn thích khóa học eduCBA nào nhất? Đánh dấu tất cả các câu phù hợp & lt; / h1 & gt;
& lt; label style = "font-size: 25px" & gt;
Java
& lt; input type = "checkbox" & gt;
& lt; / label & gt; & lt; p & gt; & lt; / p & gt;
& lt; label style = "font-size: 25px" & gt;
Dữ liệu lớn
& lt; input type = "checkbox" & gt;
& lt; / label & gt; & lt; p & gt; & lt; / p & gt;
& lt; label style = "font-size: 25px" & gt;
Angular JS
& lt; input type = "checkbox" & gt;
& lt; / label & gt; & lt; p & gt; & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Xem Thêm  Danh sách HTML - Cách sử dụng Dấu đầu dòng, Danh sách có thứ tự và Không có thứ tự - làm thế nào bạn có thể tạo một danh sách có dấu đầu dòng trong html

Nếu bạn chạy mã trên, bạn sẽ thấy đầu ra bên dưới dưới dạng hộp kiểm HTML mặc định.

HTML mặc định

Khi bạn nhấp vào hộp kiểm, bạn sẽ thấy kết quả bên dưới.

Kiểu hộp kiểm CSS 2

Trong các ví dụ tiếp theo, bạn sẽ thấy cách chúng tôi thay đổi kiểu hộp kiểm bằng cách điều chỉnh các thông số khác nhau trong CSS.

Ví dụ # 2

Trong ví dụ thứ hai, chúng ta sẽ thấy kiểu hộp kiểm mặc định sẽ sử dụng các thuộc tính CSS khác nhau như thế nào. Sau khi nhấp vào liên kết, kiểu và màu của hộp kiểm cũng sẽ thay đổi theo các giá trị trong mã CSS.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; phong cách & gt;
nội dung {
đệm: 1em;
}
đầu vào [type = "hộp kiểm"] {
-webkit-ngoại hình: không có;
chiều cao: 1,5em;
chiều rộng: 1,5em;
con trỏ: con trỏ;
vị trí: tương đối;
-webkit-chuyển đổi: .10s;
bán kính biên giới: 4em;
background-color: red;
}
input [type = "checkbox"]: đã chọn {
background-color: blue;
}
input [type = "checkbox"]: trước, input [type = "checkbox"]: đã chọn: trước {
vị trí: tuyệt đối;
đầu trang: 0;
trái: 0;
chiều rộng: 100%;
chiều cao: 100%;
chiều cao dòng: 1,5em;
text-align: center;
màu: trắng;
}
input [type = "checkbox"]: đã chọn: trước {
nội dung: '✔';
}
& lt; / style & gt;
& lt; body & gt;
& lt; h1 & gt; Bạn thích khóa học eduCBA nào nhất? Đánh dấu tất cả các câu phù hợp & lt; / h1 & gt;
& lt; label style = "font-size: 25px" & gt;
Java
& lt; input type = "checkbox" & gt;
& lt; / label & gt; & lt; p & gt; & lt; / p & gt;
& lt; label style = "font-size: 25px" & gt;
Dữ liệu lớn
& lt; input type = "checkbox" & gt;
& lt; / label & gt; & lt; p & gt; & lt; / p & gt;
& lt; label style = "font-size: 25px" & gt;
Angular JS
& lt; input type = "checkbox" & gt;
& lt; / label & gt; & lt; p & gt; & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Đó không phải là các nút radio, đó thực sự là các hộp kiểm. Chúng tôi đã thay đổi kiểu hộp kiểm bằng cách điều chỉnh giá trị của các thuộc tính CSS khác nhau.

So sánh đầu ra với đầu ra mặc định trong ví dụ trước để bạn có thể so sánh kiểu tùy chỉnh.

Kiểu hộp kiểm CSS 3

Bây giờ, khi bạn nhấp vào các hộp kiểm, các hộp kiểm đó sẽ thay đổi màu sắc và đó là do việc điều chỉnh các giá trị của thuộc tính CSS.

Một lần nữa so sánh đầu ra với đầu ra mặc định trong ví dụ trước để bạn có thể so sánh kiểu tùy chỉnh.

so sánh đầu ra với đầu ra mặc định

Ví dụ # 3

Trong ví dụ này, chúng ta sẽ thấy một kiểu khác của hộp kiểm mặc định có được bằng cách sử dụng các thuộc tính CSS khác nhau. Khi liên kết được nhấp vào, kiểu và màu của hộp kiểm cũng sẽ thay đổi theo giá trị của các thuộc tính trong phần CSS của mã HTML.

Xem Thêm  Những sai phạm trong dạy Toán ở tiểu học và cách khắc phục - những sai lầm người học toán hay mắc phải

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; phong cách & gt;
/ * tạo kiểu cơ bản * /
.styl {
display: block;
vị trí: tương đối;
padding-left: 45px;
margin-bottom: 15px;
con trỏ: con trỏ;
font-size: 20px;
}
/ * Ẩn hộp kiểm mặc định * /
đầu vào [type = checkbox] {
khả năng hiển thị: ẩn;
}
/ * bây giờ tạo một hộp kiểm tùy chỉnh dựa trên
theo yêu cầu * /
.chkmrk {
vị trí: tuyệt đối;
đầu trang: 0;
trái: 0;
chiều cao: 25px;
chiều rộng: 25px;
background-color: blue;
}
/ * đề cập đến màu nền là
hiển thị khi nó được chọn * /
.styl input: đã kiểm tra ~ .chkmrk {
background-color: green;
}
/ * không hiển thị khi hộp kiểm không được chọn * /
.chkmrk: sau {
nội dung: "";
vị trí: tuyệt đối;
hiển thị: không có;
}
/ * hiển thị dấu kiểm khi nó được chọn * /
.styl input: đã kiểm tra ~ .chkmrk: after {
display: block;
}
/ * bây giờ hãy tạo một hình vuông để làm ký hiệu là
khi hộp kiểm được chọn * /
.styl .chkmrk: sau {
trái: 6px;
dưới cùng: 5px;
chiều rộng: 6px;
chiều cao: 6px;
viền: trắng liền;
chiều rộng đường viền: 4px 4px 4px 4px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 & gt; Bạn yêu thích khóa học nào nhất trong eduCBA? Đánh dấu tất cả các câu phù hợp & lt; / h1 & gt;
& lt; label class = "styl" style = "color: black;" & gt;
Java
& lt; input type = "checkbox" & gt;
& lt; span class = "chkmrk" & gt; & lt; / span & gt;
& lt; / label & gt;
& lt; label class = "styl" style = "color: black;" & gt;
Dữ liệu lớn và Phân tích
& lt; input type = "checkbox" & gt;
& lt; span class = "chkmrk" & gt; & lt; / span & gt;
& lt; / label & gt;
& lt; label class = "styl" style = "color: black;" & gt;
Angular JS
& lt; input type = "checkbox" & gt;
& lt; span class = "chkmrk" & gt; & lt; / span & gt;
& lt; / label & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Chúng tôi đã thay đổi kiểu hộp kiểm bằng cách điều chỉnh giá trị của các thuộc tính CSS khác nhau.

So sánh đầu ra với các đầu ra khác trong các ví dụ trước.

Kiểu hộp kiểm CSS 5

Bây giờ khi bạn nhấp vào các hộp kiểm, các hộp kiểm đó sẽ lại thay đổi kiểu. Một lần nữa so sánh kết quả đầu ra với kết quả đầu ra trong các ví dụ trước, xem lần này kiểu được thay đổi như thế nào khi hộp kiểm được nhấp.

sẽ thay đổi lại kiểu

Kết luận

Phần này kết thúc chủ đề “Kiểu hộp kiểm CSS”. Bài viết này sẽ rất hữu ích cho những ai có liên quan đến thiết kế HTML. Thực tế, kiểu dáng này trong các hộp kiểm mang lại cho kiểu dáng và thiết kế của trang HTML của bạn một giao diện phong phú về cơ bản làm tăng mức độ tương tác của người dùng nhiều hơn.

Xem Thêm  Python Truy cập các phần tử trong Python Tuples - truy cập các phần tử trong tuple python

Các bài báo được đề xuất

Đây là hướng dẫn về Kiểu hộp kiểm CSS. Ở đây chúng ta thảo luận về phần giới thiệu, CSS checkbox style hoạt động như thế nào? cùng với các ví dụ tương ứng. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề cách tạo kiểu hộp kiểm css

Tạo Search Box mở rộng bằng Html Css trong 30 phút – Unitop.vn

alt

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2022-03-25
  • Đánh giá: 4 ⭐ ( 6758 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Video này tôi chia sẻ bạn cách để tạo thanh tìm kiếm (Search box) có tính năng mở rộng với Html Css.
    ——
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ————
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youtube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen

    ————————–
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn

    unitop hocwebdilam

Kiểu đầu vào hộp kiểm CSS

  • Tác giả: vie.nickfish2008.com
  • Đánh giá: 3 ⭐ ( 7234 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bất kỳ kiểu nào cho đầu vào đều ảnh hưởng đến mọi phần tử đầu vào. Có cách nào để chỉ định kiểu để chỉ áp dụng cho các hộp kiểm mà không áp dụng một lớp cho mỗi phần tử hộp kiểm không?

Làm cách nào tôi có thể tùy chỉnh các kiểu hộp kiểm bằng CSS? 2020

  • Tác giả: vi.umcod.org
  • Đánh giá: 3 ⭐ ( 4204 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tạo kiểu, Viết CSS cho List

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 3 ⭐ ( 1558 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hiểu mô hình hộp CSS

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 3 ⭐ ( 5997 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tạo kiểu cho hộp kiểm tra hiệu ứng hoạt hình của riêng bạn với Checkbox.css / Thiết kế web

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 3 ⭐ ( 7868 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong một bài đăng gần đây, tôi đã trình bày một thư viện hoạt hình thú vị cho các nút radio tùy chỉnh, được cung cấp bởi CSS. Thư viện miễn phí đó được phát hành bởi 720kb và nhanh chóng thấy một

Kiểu dáng hộp kiểm CSS

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 6229 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Với CSS 2, bạn có thể làm điều này: input[type=’checkbox’] { … } Điều này nên…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php