Thay đổi kiểu tự động điền trong trình duyệt WebKit - Thủ thuật CSS

Chúng tôi nhận được một mẹo hay từ Lydia Dugger qua email với một phương pháp để thay đổi kiểu mà trình duyệt WebKit áp dụng cho các trường biểu mẫu đã được tự động hoàn thành.

Ý chúng tôi là tự động hoàn thành

Nhiều trình duyệt (bao gồm Chrome và Safari) cung cấp cài đặt cho phép người dùng tự động điền thông tin chi tiết cho các trường biểu mẫu chung. Bạn đã thấy điều này khi hoàn thành một biểu mẫu yêu cầu những thứ như tên, địa chỉ và email.

Điều bắt buộc là người dùng phải bật cài đặt này để đoạn mã này có hiệu quả. Nếu cài đặt được bật, thì trình duyệt WebKit sẽ tạo kiểu cho các trường mà nó đã tự động hoàn thành cho người dùng, như sau:

Chú ý làm thế nào các trường tự động hoàn thành có nền màu vàng? Đó là những gì chúng tôi đang đề cập đến và sẽ thay đổi với đoạn mã này.

Đoạn mã

Chúng ta có thể sử dụng -webkit-autofillbộ chọn giả để nhắm mục tiêu các trường đó và tạo kiểu cho chúng khi chúng ta thấy phù hợp. Kiểu mặc định chỉ ảnh hưởng đến màu nền, nhưng hầu hết các thuộc tính khác áp dụng ở đây, chẳng hạn như bordervà font-size. Chúng tôi thậm chí có thể thay đổi màu của văn bản bằng cách sử dụng -webkit-text-fill-colortrong đoạn mã bên dưới.

/* Change Autocomplete styles in Chrome*/ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus ( border: 1px solid green; -webkit-text-fill-color: green; -webkit-box-shadow: 0 0 0px 1000px #000 inset; transition: background-color 5000s ease-in-out 0s; )