Xuất hiện kiểu ngày nhập trong Safari trên iOS

Question

Tôi đang cố sử dụng ngày nhập kiểu thông thường để sử dụng trên thiết bị di động. Nhưng chiều rộng được thiết lập trong CSS bị overruled bởi Safari (hoặc webkit).

Tôi có thể thêm -webkit-appearance: none; vào CSS và theo đó, chiều rộng sẽ hoạt động như mong đợi. Nhưng sau đó tôi mất tất cả các phong cách khác mà là muốn, ví dụ như mũi tên để chỉ ra rằng nó là một bộ chọn.

Có cách nào để tôi có thể giữ kiểu dáng cơ bản của ngày loại đầu vào hay không, nhưng tự mình kiểm soát chiều rộng?

Answer 1

-webkit-appearance: none; luôn xóa kiểu dáng điển hình của bộ chọn ... Nhưng bạn có thể dễ dàng thêm mũi tên bằng CSS và hình nền.

Tôi không biết cách tùy chỉnh kiểu nhập mà còn giữ mũi tên.

Answer 2

Thêm -webkit-min-logical-width: <your desired value>. Nó giải quyết vấn đề cho tôi!

Answer 3

nếu bạn chỉ muốn chọn input[type='date'] và input[type='time'] hãy thử dòng CSS này.

input[type='date'], input[type='time'] { 
    -webkit-appearance: none; 
}