Ngăn Safari Mobile cung cấp các nút nhập liệu có góc tròn

82

Tôi đoán chủ đề nói lên tất cả. Tôi có một ứng dụng web khi xem trên Iphone, Ipod hoặc Ipad, các nút gửi đầu vào có các góc tròn. Có cách nào để ngăn chặn điều này?

ios mobile-safari

— Newbie Fletcher
nguồn

185

Nếu bạn thêm...

input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

Sau đó, các nút của bạn sẽ kế thừa bất kỳ kiểu CSS nào mà bạn đã áp dụng cho các trình duyệt khác.

— phương pháp
nguồn

1

Điều này không hoạt động trên iPad2, iOS 5.1.1. Tôi không thể chắc chắn rằng nó sẽ không hoạt động trên các thiết bị iOAS khác, vì tôi chưa có bất kỳ thiết bị nào để kiểm tra nó. Tuy nhiên, -webkit-border-radius:0pxgiải pháp của Roel có hiệu quả.

— coredumperror

Nếu bạn không áp dụng -webkit-xuất hiện: none thì Safari được kén cá chọn canh trên các thuộc tính có thể được áp dụng trên nó (cụ thể là, font-sizevà colorGiải pháp tốt nhất sẽ được áp dụng cả hai..

— methodofaction

Báo cáo để xác nhận rằng giải pháp này hoạt động cho iPad, iOS 5.1.1.

— Dominor Novus

6

trả lời bình luận 2 tuổi .... ôi thôi. -webkit-ngoại hình: không có; khiến hộp kiểm không hiển thị trong Chrome. Có thể ảnh hưởng đến các phần tử và trình duyệt khác.

— matthew_360

WOW !!! Chúng tôi đã tìm kiếm hàng giờ để sửa lỗi này trong một ứng dụng cordova và đây là giải pháp! Tôi không thể ủng hộ điều này đủ !!!

— Jay Dinse

18

Không hiệu quả với tôi, -webkit-ngoại hình: không có.

Điều này làm:

input[type=submit] {
    -webkit-border-radius:0px;
}

Tôi đã gặp vấn đề tương tự với các góc tròn trên nút có hình nền, chỉ trên iPhone.

— Roel
nguồn

1

Xác nhận: câu trả lời được bình chọn cao nhất ở đây (bởi Duopixel) không hoạt động, nhưng câu trả lời của Roel thì có. Điều này có thể là do một sự thay đổi được thực hiện đối với việc triển khai bộ web dành cho thiết bị di động của Apple trong những tháng gần đây.

— coredumperror

@CoreDumpError - Ý bạn là nó không hoạt động với bạn . Giải pháp đã hiệu quả với tôi - Tôi vừa mới triển khai nó. Không chắc tại sao chúng ta lại gặp phải những kết quả khác nhau. Một lần nữa, bài đăng của bạn đã được thực hiện cách đây hơn nửa năm nên tôi không thể biết liệu bạn có còn gặp sự cố tương tự hay không.

— Dominor Novus

@Roel, đơn giản là bạn có thể gặp vấn đề về quyền ưu tiên ...?

— Frank Nocke

13

Bạn có thể thử sử dụng CSS sau:

-webkit-appearance:none;

Thông tin thêm: http://trentwalton.com/2010/07/14/css-webkit-appearance/

— dthukka
nguồn

6

Tôi thấy rằng trên iPad 2, bạn phải sử dụng những thứ sau:

-webkit-appearance:none;
border-radius: 0;

trong lớp nút của bạn.

— Daniele F.
nguồn

3

Tôi đã có một trang web với loại gửi đầu vào = "hình ảnh". Việc đóng vai trò ở trên đã cố định các góc tròn:

input[type=image] {
    -webkit-border-radius:0px;
}

— RevConcept
nguồn

1

Tôi thấy rằng cài đặt background: linear-gradient(color1, color2)loại bỏ các góc quá tròn trên thiết bị Apple và hoạt động trên tất cả các trình duyệt / nền tảng khác mà tôi đã thử.

— mait
nguồn

Điều này đã khắc phục nó cho tôi và đối với tôi, nó dường như là lựa chọn ít có khả năng xảy ra các tác dụng phụ ngoài ý muốn nhất.

— Wim Deblauwe

1

Tôi đã giải quyết bằng cách thêm mã cho cả hai loại "nút" và "gửi":

   input[type="submit"] {
   text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

    input[type="button"] {
        text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

— AGalvis
nguồn