Đầu vào biểu mẫu tạo kiểu trong CSS Với: bắt buộc,: tùy chọn,: hợp lệ và: không hợp lệ

Khi nói đến việc xác thực nội dung của các trường đầu vào trên giao diện user , mọi thứ giờ đây dễ dàng hơn nhiều so với trước đây. Ta có thể sử dụng các lớp giả : cần thiết ,: tùy chọn,: hợp lệ và : không hợp lệ cùng với các thuộc tính xác thực biểu mẫu HTML5 như bắt buộc hoặc mẫu để tạo ra các kết quả trực quan hấp dẫn. Các lớp giả này hoạt động cho đầu vào , vùng văn bản và các phần tử được chọn .

Nhập các lớp giả

Đây là một ví dụ về các lớp giả tại nơi làm việc. Hãy bắt đầu với đánh dấu HTML này:

<form action="#">   <input type="text" placeholder="First Name" required>   <input type="email" placeholder="Email" required>   <input type="text" placeholder="Nickname">   <input type="text" placeholder="Favorite pizza topping"> </form>

Và hãy áp dụng các phong cách sau:

input {   border: 2px solid;   border-radius: 4px;   font-size: 1rem;   margin: 0.25rem;   min-width: 125px;   padding: 0.5rem;   transition: background-color 0.5s ease-out; } input:optional {   border-color: gray; } input:required {   border-color: black; } input:invalid {   border-color: red; }

Đây là kết quả:

Xem Pen vYGeLYw của alligatorio ( @alligatorio ) trên CodePen .

Trong bản trình diễn ở trên, <input type="email" là kiểu nhập HTML5 thông báo cho các trình duyệt mong đợi một địa chỉ email. Bởi vì ta cũng đang sử dụng thuộc tính required , các trình duyệt hiện đại sẽ chỉ đặt đầu vào thành :valid khi một email hợp lệ được nhập.

Thêm: lớp giả tiêu điểm

Hãy làm cho mọi thứ thú vị hơn nữa bằng cách tạo kiểu theo trạng thái lấy nét và thêm hình nền và màu sắc tùy thuộc vào trạng thái hợp lệ và chỉ khi đầu vào được lấy nét. Ta sẽ sử dụng cùng một mã đánh dấu HTML.

Đây là CSS được cập nhật của ta :

input {   border: 2px solid;   border-radius: 4px;   font-size: 1rem;   margin: 0.25rem;   min-width: 125px;   padding: 0.5rem;   transition: border-color 0.5s ease-out; } input:optional {   border-color: gray; } input:required:valid {   border-color: green; } input:invalid {   border-color: red; } input:required:focus:valid {   background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% lightgreen;   background-size: 25px; } input:focus:invalid {   background: url("https://assets.digitalocean.com/labs/icons/exclamation-triangle-fill.svg") no-repeat 95% 50% lightsalmon;   background-size: 25px; }

Có hai thay đổi chính trong CSS ở trên:

input:required:valid áp dụng trạng thái thành công cho các đầu vào required . Bởi vì về mặt kỹ thuật, optional đầu vào optional luôn hợp lệ.
input:focus:valid' and 'input:focus:invalid áp dụng cho các đầu vào khi chúng được lấy tiêu điểm.

Và đây là kết quả:

Xem Pen gOrGPxP của alligatorio ( @alligatorio ) trên CodePen .

Bạn có thể bị cám dỗ để thêm nội dung thay vào đó bằng cách sử dụng :: before hoặc :: after trên đầu vào, nhưng tiếc là không thể thực hiện được trên các phần tử đầu vào. Một mẹo sẽ là có một phần tử span anh chị em có nội dung được thêm vào tùy thuộc vào tính hợp lệ của đầu vào. Thông tin như thế này:

input:focus:invalid + span::before { ... } .

Tags:

Các tin liên quan

Tạo kiểu cho thanh cuộn bằng CSS: Cách hiện đại để tạo kiểu cho thanh cuộn
2020-09-02
Tạo các phần tử dính trong CSS Vị trí sử dụng: dính
2020-09-02
Tạo mặt nạ image trong CSS bằng thuộc tính mask-image
2020-09-02
rem vs em Unit trong CSS
2020-09-02
Hướng dẫn thực hành để sử dụng CSS Vị trí tương đối & tuyệt đối
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Tham khảo: Tên màu CSS
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Thuộc tính z-index CSS Mighty
2020-09-01
CSS: focus-trong Pseudo-Class
2020-09-01