Cổng Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : cách định kiểu hộp kiểm nhập liệu

Hộp kiểm là một phần tử HTML được sử dụng để lấy đầu vào từ người dùng. Mặc dù có một chút phức tạp để tạo kiểu cho nó nhưng bằng cách sử dụng Pseudo Elements như: before,: after,: hover và: đã chọn, bạn có thể tạo kiểu cho một hộp kiểm. Để tạo kiểu cho hộp kiểm, trước tiên người dùng cần ẩn hộp kiểm mặc định. Điều này có thể được thực hiện bằng cách đặt giá trị của thuộc tính hiển thị thành ẩn.

Ví dụ 1: Xem xét ví dụ nơi hộp kiểm HTML được tạo kiểu bằng CSS. Ba hộp kiểm đầu tiên được tạo và sau đó các hộp kiểm mặc định được ẩn và hộp kiểm mới được tạo bằng cách sử dụng thuộc tính chiều cao và chiều rộng. Đặt thuộc tính chiều cao và chiều rộng thành 25px và màu nền ban đầu thành màu đen. Dấu kiểm cũng được tạo kiểu thủ công bằng cách sử dụng webkit. “: Đã kiểm tra” được sử dụng để tạo kiểu cho hộp kiểm sau khi nó được chọn. Khi người dùng nhấp vào hộp kiểm, màu nền được đặt thành màu xanh lục.
Về cơ bản, bạn nên tiếp cận bằng cách suy nghĩ về các tình huống mà bạn muốn hộp kiểm của mình được tạo kiểu khác như khi nó bình thường, đang hoạt động, di chuột qua hoặc được chọn vv Sau đó, đối với mỗi kịch bản, chỉ định các kiểu khác nhau như được sử dụng trong CSS bình thường. Hơn nữa, bạn cũng có thể thay đổi dấu kiểm.

< / p>

& lt;! DOCTYPE html & gt;

& lt; html & gt;

< code class = "trơn"> & lt; head & gt;

& lt; style & gt;

. main {

display: block;

< code class = "undefined space"> vị trí: tương đối;

padding-left: 45px;

margin-bottom: 15px;

con trỏ: pointer;

font-size: 20px;

}

/ * Ẩn hộp kiểm mặc định * /

input [type = checkbox] {

khả năng hiển thị: hidden;

}

/ * Tạo hộp kiểm tùy chỉnh

dựa trên nhu cầu * /

. geekmark {

position: tuyệt đối;

top: 0;

left: 0;

height: 25px;

width: 25px;

background-color: black;

}

/ * Chỉ định màu nền là

được hiển thị khi di chuột qua hộp kiểm * /

. main: hover input ~ .geekmark { < / p>

background-color: yellow;

< p class = "line number35 index34 alt2"> }

/ * Chỉ định màu nền sẽ được

hiển thị khi hộp kiểm đang hoạt động * /

. main input: active ~ .geekmark {

background-color: red;

}

< p class = "line number43 index42 alt2"> / * Chỉ định màu nền là

hiển thị khi hộp kiểm được chọn * /

. đầu vào chính: đã kiểm tra ~ .geekmark {

background-color: green;

}

/ * Dấu kiểm được hiển thị trong hộp kiểm * /

/ * Nó không được hiển thị khi không được chọn * /

. geekmark: sau {

< code class = "trơn"> nội dung: "";

vị trí: tuyệt đối;

display: none;

}

/ * Hiển thị dấu kiểm khi được chọn * /

. main input: đã kiểm tra ~ .geekmark: after {

display: block;

}

/ * Tạo kiểu cho dấu kiểm bằng cách sử dụng webkit * /

/ * Xoay hình chữ nhật 45 độ và

< code class = "undefined space"> chỉ hiển thị hai đường viền để làm cho nó trông

như một dấu tích * /

. Main .geekmark: after {

left: 8px;

bottom: 5px;

width: 6px;

height: 12px;

border: solid white;

border-width: 0 4px 4px 0;

- webkit-biến đổi: xoay (45deg);

- ms-biến đổi: xoay (45deg);

biến đổi: xoay (45deg);

}

& lt; / style & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; h1 style = "color : green; " & gt;

Nền tảng Khoa học Máy tính Tốt nhất

& lt; / h1 & gt;

& lt; nhãn class = "main" & gt; CodeX

& lt; input type = "hộp kiểm" & gt; < / code>

& lt; span class = "geekmark" & gt; & lt; / span & gt;

& lt; / nhãn & gt;

& lt; nhãn class = "main" & gt; GeeksforGeeks

& lt; input type = "hộp kiểm" đã chọn = "đã kiểm tra" & gt;

& lt; span class = "geekmark" & gt; & lt; / span & gt;

& lt; / nhãn & gt;

& lt; nhãn class = "main" & gt; CodeY

& lt; input loại = "hộp kiểm" & gt;

& lt; span class = "geekmark" & gt; & lt; / span & gt;

& lt; / nhãn & gt;

& lt; / body & gt;

& lt; / html & gt;

 
  

Đầu ra:

Lưu ý:

  • “ ~ ”là tổ hợp anh chị em chọn tất cả các phần tử đứng trước bộ chọn cũ.
  • “: hover” được sử dụng để tạo kiểu cho hộp kiểm khi người dùng di chuột qua nó. Lưu ý rằng khi con trỏ chuột di chuyển qua hộp kiểm, màu của nó sẽ chuyển thành màu vàng.
  • “: active” được sử dụng để tạo kiểu cho hộp kiểm khi nó đang hoạt động. Lưu ý rằng khi nhấp vào hộp kiểm, đầu tiên nó sẽ nhận thấy màu đỏ và sau đó là màu xanh lục.

Ví dụ 2: Hãy xem xét một ví dụ khác với thiết kế séc được sửa đổi một chút -mark.


< br />

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; < / code> head & gt;

& lt; title & gt;

Tạo kiểu hộp kiểm bằng CSS

& lt; / title < / code> & gt;

< p class = "line number9 index8 alt2"> & lt; style & gt;

.script {

display: block;

vị trí: tương đối;

< p class = "số dòng ber13 index12 alt2 "> padding-left: 45px;

margin-bottom: 15px;

con trỏ: con trỏ;

font- size: 20px;

} < / p>

/ * Ẩn hộp kiểm mặc định * /

< / code> input [type = checkbox] {

khả năng hiển thị: hidden;

}

< / p>

/ * tạo một hộp kiểm tùy chỉnh dựa trên

theo yêu cầu * /

. geekmark {

vị trí: tuyệt đối;

top: 0;

< code class = "trơn"> left: 0;

height: 25px;

width: 25px;

< code class = "trơn"> background-color: green;

}

/ * chỉ định màu nền là

< code class = "undefined space"> được hiển thị khi di chuột qua hộp kiểm * /

. script: hover input ~ .geekma rk {

background-color: yellow;

}

< code class = "trơn"> / * chỉ định màu nền là

được hiển thị khi hộp kiểm đang hoạt động * /

.script đầu vào: active ~ .geekmark {

background-color: red;

}

/ * chỉ định màu nền là

hiển thị khi hộp kiểm được chọn * /

. đầu vào script: đã kiểm tra ~ .geekmark {

background-color: green;

}

/ * dấu kiểm được hiển thị trong hộp kiểm * /

/ * Nó không được hiển thị khi không được chọn * /

. geekmark: after {

nội dung: "";

vị trí: tuyệt đối;

< code class = "same"> display: none;

}

/ * hiển thị dấu kiểm khi được chọn * /

. script input: đã kiểm tra ~ .geekmark: after {< / code>

display: block;

}

/ * tạo kiểu dấu kiểm bằng cách sử dụng webkit * /

/ * tạo một hình vuông để làm dấu hiệu của

dấu kiểm * /

. script .geekmark: after {

left: 6px;

bottom: 5px;

width: 6px;

height: 6px;

border: solid white; < / p>

border-width: 4px 4px 4px 4px;

}

& lt; / style & gt;

& lt; / head & gt;

< code class = "undefined space">

& lt; body & gt;

& lt; h1 & gt; GeeksforGeeks có hữu ích không? & lt; / h1 & gt;

& lt; nhãn class = "script" style = "color: green ; " & gt;

& lt; < / code> input type = "hộp kiểm" & gt;

< code class = "trơn"> & lt; span class = "geekmark" & gt ; & lt; / span & gt;

& lt; / nhãn & gt ;

& lt; nhãn class = "script" style = "color: green;" & gt;

Hoàn toàn có

& lt; input type = " checkbox " đã chọn < mã class = "trơn"> = "đã kiểm tra" & gt;

& lt; span class = "geekmark" & gt; & lt; / span & gt;

& lt; / nhãn & gt;

& lt; / body & gt;

& lt; / html & gt;

 
  

Đầu ra:

CSS là nền tảng của trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu cho trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS Ví dụ CSS này .

< p id = "AP_G4GR_6">

Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề cách định kiểu hộp kiểm nhập liệu

Practical Guide Session 4 (Review of Systems)

alt

  • Tác giả: Dinh-Van Nguyen
  • Ngày đăng: 2021-06-21
  • Đánh giá: 4 ⭐ ( 4515 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách giới hạn dữ liệu với Data Validation trong Google Sheets chi tiết

  • Tác giả: www.thegioididong.com
  • Đánh giá: 5 ⭐ ( 1669 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng Data Validation, cách giới hạn dữ liệu với Data Validation trong Google Sheets cực chi tiết, đơn giản, dễ làm. Vào xem ngay!!

Kiểm tra dữ liệu nhập vào một ô trong bảng tính Excel

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 8070 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách Kiểm tra dữ liệu nhập vào một ô trong bảng tính Excel chỉ với các thao tác đơn giản dưới đây

Những quy định định dạng các kiểu dữ liệu Window 7

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

Cách kiểm soát dữ liệu nhập trong Excel(phần 1)

  • Tác giả: tinhocmos.edu.vn
  • Đánh giá: 4 ⭐ ( 1819 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi nhập dữ liệu, nhiều khi chúng ta gặp trường hợp bị nhập sai dạng. Để khắc phục tình trạng đó, bạn có thể dùng chức năng Data Validation trong Excel.

Cách nhập (mã hóa) dữ liệu trong SPSS từ Excel

  • Tác giả: proskills.vn
  • Đánh giá: 3 ⭐ ( 8100 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở bài viết này Proskills.vn sẽ hướng dẫn bạn cách nhập dữ liệu trong SPSS từ Excel. Tất nhiên, có rất nhiều cách để nhập dữ liệu vào SPSS, tuy nhiên đây là cách phổ thông nhất hiện nay. Nào, hãy cùng chúng tôi tìm hiểu nhé!

Cách tạo kiểu hộp kiểm với CSS

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 2241 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hộp kiểm là một thành phần HTML có thể được sử dụng trên mọi trang web, nhưng hầu hết mọi người không tạo kiểu cho chúng để chúng trông giống như trên mọi trang web khác. Tại sao không làm…

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

Xem Thêm  Cách thay đổi màu văn bản trong Html - cách thay đổi màu văn bản trong html

By ads_php