Nút gửi CSS kết xuất kỳ lạ trên iPad / iPhone

222

Tôi nhận thấy rằng nếu tôi tạo kiểu cho các nút của mình bằng CSS bằng bán kính, màu sắc và đường viền, chúng trông đẹp nhưng trong iphone / ipad / ipod thì chúng trông rất tệ ... không nên giống như trong Safari Desktop ??

nhập mô tả hình ảnh ở đây

— Francesco
nguồn

có thể trùng lặp kiểu dáng css cho các nút nhập trên ipad / iphone

— skolima

Câu trả lời:

453

Giáo sư! chỉ tìm thấy chính mình: chỉ cần thêm dòng này vào bất kỳ yếu tố nào bạn cần

   -webkit-appearance: none;

— Francesco
nguồn

tôi yêu bạn, stackoverflow và @Francesco

— jahrichie

Rực rỡ, và đây là một bài viết tuyệt vời về nó từ các thủ thuật CSS. Nó liệt kê tất cả các yếu tố khác được thay đổi bởi WebKit và Mozilla.

— Patrick

La bàn có một mixin cho điều này cũng như la bàn

— Patrick Beeson

Tôi ước tôi đã thực hiện tìm kiếm google này 12 giờ trước ... CẢM ƠN BẠN.

— Elly Post

Thực sự tuyệt vời! Chúng tôi đã không nghĩ rằng loại vấn đề này chúng tôi cũng đã xảy ra trong iOS! Một lần nữa cảm ơn bạn rất nhiều vì điều này!

— Saurabh Prajapati

Thêm mã này vào tệp css:

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

Điều này sẽ giúp.

— chiều tối
nguồn

Tuyệt quá! Nút gửi biểu mẫu bây giờ trông giống như trên iPad của tôi

— peterkodermac

@peterkodermac xin đừng quên thêm lớp CSS cha, nếu không, điều này có thể ảnh hưởng đến mọi trường đầu vào.

— subindas chiều

Câu trả lời ở trên cho sự xuất hiện của webkit đã làm nên điều kỳ diệu, nhưng nút vẫn trông có vẻ nhợt nhạt / buồn tẻ so với trình duyệt trên các thiết bị / máy tính để bàn khác. Tôi cũng phải đặt opacity thành đầy đủ (trong khoảng từ 0 đến 1)

-webkit-appearance:none;
opactiy: 1

Sau khi cài đặt độ mờ, nút này trông giống nhau trên tất cả các thiết bị / trình giả lập / máy tính để bàn khác nhau.

— Priyank Thakkar
nguồn