Đầu vào biểu mẫu kiểu dáng tùy chỉnh với các tính năng CSS hiện đại

hoặc để đưa ra một thiết kế tùy chỉnh.

Hãy cùng xem xét HTML

Không có gì đặc biệt ở đây. Chúng tôi có thể định kiểu đầu vào của mình chỉ bằng HTML này:

Rằng nó cho phần HTML, nhưng dĩ nhiên, nó khuyên bạn nên có các thuộc tính tên và id, cộng với phần tử :

  

 Hộp kiểm 



 Đài phát thanh 



 Chuyển đổi   

Bắt đầu tạo kiểu

Trước hết, chúng tôi kiểm tra sự hỗ trợ của sự xuất hiện : none; bao gồm cả những người bạn đồng hành có tiền tố. Thuộc tính xuất hiện là khóa vì nó được thiết kế để xóa kiểu dáng mặc định của trình duyệt khỏi một thành phần. Nếu thuộc tính được hỗ trợ, các kiểu thắng được áp dụng và các kiểu nhập mặc định sẽ được hiển thị. Điều đó hoàn toàn tốt và là một ví dụ điển hình về sự tăng cường tiến bộ khi chơi.

  @supports (-webkit-ngoại hình: không có) hoặc (-moz-xuất hiện: không) {
đầu vào [type='checkbox'],
đầu vào [type='radio'] {
-webkit-ngoại hình: không có;
-moz-xuất hiện: không có;
}
}  

Như ngày nay, ngoại hình là một bản nháp đang hoạt động, nhưng ở đây, bộ phận hỗ trợ trông như thế nào:

Giống như các liên kết, chúng tôi phải xem xét các trạng thái tương tác khác nhau với các yếu tố hình thức. Chúng tôi sẽ xem xét những điều này khi tạo kiểu cho các yếu tố của mình:

• : đã kiểm tra
• : hover
• : tập trung

]: bị vô hiệu hóa

Ví dụ, ở đây, cách chúng ta có thể định kiểu đầu vào chuyển đổi, tạo núm và tài khoản cho : đã kiểm tra trạng thái:

  / * Container chuyển đổi * /
.công tắc điện {
chiều rộng: 38px;
bán kính đường viền: 11px;
}

/ * Núm chuyển đổi * /
.switch :: sau {
trái: 2px;
đầu trang: 2px;
bán kính biên giới: 50%;
chiều rộng: 15px;
chiều cao: 15px;
nền: var (- ab, var (- viền));
biến đổi: translateX (var (- x, 0));
}

/ * Thay đổi màu sắc và vị trí khi được chọn * /
.switch: đã kiểm tra {
--ab: var (- hoạt động bên trong);
--x: 17px;
}

/ * Giảm độ mờ của núm chuyển đổi khi đầu vào bị tắt * /
.switch: bị vô hiệu hóa: không (: đã kiểm tra) :: sau {
độ mờ đục: .6;
}  

Chúng tôi đang sử dụng phần tử giống như một container. Núm bên trong của đầu vào được tạo bằng phần tử giả :: sau . Một lần nữa, không cần thêm đánh dấu!

Nếu bạn mở các kiểu trong bản demo, bạn sẽ thấy rằng chúng tôi đang xác định một số thuộc tính tùy chỉnh CSS bởi vì đó trở thành một cách hay để quản lý các giá trị có thể sử dụng lại trong biểu định kiểu:

  @supports (-webkit-ngoại hình: không có) hoặc (-moz-xuất hiện: không) {
đầu vào [type='checkbox'],
đầu vào [type='radio'] {
- Hoạt động: # 275EFE;
--active-bên trong: #fff;
--f Focus: 2px rgba (39, 94, 254, .25);
--border: # BBC1E1;
--border-hover: # 275EFE;
- Sân sau: #fff;
- đã tắt: # F6F8FF;
--disables-bên trong: # E1E6F9;
}
}  

Nhưng có một lý do khác khiến chúng tôi sử dụng các thuộc tính tùy chỉnh – chúng hoạt động tốt để cập nhật các giá trị dựa trên trạng thái của phần tử! Chúng tôi đã chiến thắng đi vào chi tiết đầy đủ ở đây, nhưng ở đây, một ví dụ về cách chúng ta có thể sử dụng các thuộc tính tùy chỉnh cho các trạng thái khác nhau.

  / * Mặc định * /
đầu vào [type='checkbox'],
đầu vào [type='radio'] {
  - Hoạt động: # 275EFE;
  --border: # BBC1E1;
  viền: 1px solid var (- bc, var (- Border));
}

/ * Ghi đè mặc định * /
đầu vào [type='checkbox']: đã chọn,
đầu vào [type='radio']: đã chọn {
  --b: var (- hoạt động);
  --bc: var (- hoạt động);
}
  
/ * Áp dụng màu đường viền khác khi di chuột nếu không được chọn và không bị tắt * /
input [type='checkbox']: not (: đã kiểm tra): not (: bị vô hiệu hóa): hover,
đầu vào [type='radio']: không (: đã kiểm tra): không (: bị vô hiệu hóa): hover {
  --bc: var (- viền-di chuột);
}  

Để truy cập, chúng tôi phải thêm một kiểu lấy nét tùy chỉnh. Chúng tôi đang xóa phác thảo mặc định bởi vì nó có thể được làm tròn giống như phần còn lại của những thứ mà chúng tôi tạo kiểu. Nhưng bán kính đường viền cùng với bóng hình hộp có thể tạo ra một kiểu tròn hoạt động giống như một đường viền.

  đầu vào [type='checkbox'],
đầu vào [type='radio'] {
--f Focus: 2px rgba (39, 94, 254, .25);
phác thảo: không có;
chuyển tiếp: hộp bóng .2s;
}

đầu vào [type='checkbox']: tập trung,
đầu vào [type='radio']: tập trung {
hộp bóng: 0 0 0 var (- tiêu điểm);
}  

Nó cũng có thể căn chỉnh và tạo kiểu cho phần tử trực tiếp theo phần tử trong HTML:

  
 Hộp kiểm   

  đầu vào [type='checkbox'] + nhãn,
đầu vào [type='radio'] + nhãn {
hiển thị: khối nội tuyến;
dọc-align: trên cùng;
/ * Kiểu dáng bổ sung * /
}

đầu vào [type='checkbox']: bị vô hiệu hóa + nhãn,
đầu vào [type='radio']: bị vô hiệu hóa + nhãn {
con trỏ: không được phép;
}  

---

Tại đây, bản demo đó một lần nữa:

Hy vọng rằng, bạn sẽ thấy thật tuyệt vời khi tạo các kiểu biểu mẫu tùy chỉnh ngày nay. Nó đòi hỏi ít đánh dấu hơn, nhờ các yếu tố giả trực tiếp trên đầu vào biểu mẫu. Nó đòi hỏi ít chuyển đổi phong cách ưa thích, nhờ các thuộc tính tùy chỉnh. Và nó có hỗ trợ trình duyệt khá tốt, nhờ @supports .

Nói chung, đây là một trải nghiệm thú vị dành cho nhà phát triển hơn nhiều so với những gì chúng tôi đã phải đối phó trong quá khứ!