Tắt phần tử đầu vào của iPhone/Safari làm tròn

Question

Trang web của tôi hiển thị tốt trên trình duyệt iPhone/Safari, với một ngoại lệ: Các trường nhập văn bản của tôi có kiểu được làm tròn kỳ lạ trông không đẹp chút nào với phần còn lại của trang web của tôi.

Có cách nào để hướng dẫn Safari (thông qua CSS hoặc siêu dữ liệu) không làm tròn các trường nhập và hiển thị hình chữ nhật như dự định không?

Answer 1

Trên iOS 5 và sau đó, ol tốt' border-radius hiện các trick:

input { 
    border-radius: 0; 
} 

Nếu bạn chỉ phải loại bỏ các góc tròn trên iOS hoặc vì một lý do không thể bình thường hóa các góc tròn trên nền tảng, sử dụng thay vào đó, thuộc tính -webkit-border-radius được thêm tiền tố, vẫn được hỗ trợ. Tất nhiên lưu ý rằng Apple có thể chọn để thả hỗ trợ cho các thuộc tính tiền tố bất cứ lúc nào, nhưng xem xét các tính năng CSS nền tảng cụ thể khác của họ rất có thể là họ sẽ giữ nó xung quanh.

Trong các phiên bản cũ, bạn phải thiết lập -webkit-appearance: none thay vì:

input { 
    -webkit-appearance: none; 
} 

Answer 2

input -webkit-appearance: none; một mình không hoạt động.

Hãy thử thêm -webkit-border-radius:0px; ngoài ra.

Answer 3

Đối với tôi trên iOS 5.1.1 trên iPhone 3GS Tôi phải rõ ràng phong cách của một lĩnh vực tìm kiếm và thiết lập nó với phong cách thiết kế

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;} 

Làm -webkit-border-radius: 0; một mình không rõ ràng kiểu gốc. Đây cũng là một lượt xem trên một ứng dụng gốc.

Answer 4

Tôi đã gặp sự cố tương tự nhưng chỉ cho nút gửi. Cần phải xóa bóng bên trong và góc tròn -

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; } 

Answer 5

Tôi đã sử dụng bán kính đường viền đơn giản: 0; để loại bỏ các góc bo tròn cho các kiểu nhập văn bản.

Answer 6

Dưới đây là giải pháp hoàn chỉnh cho Compass (SCSS):

input { 
    -webkit-appearance: none; // remove shadow in iOS 
    @include border-radius(0); // remove border-radius in iOS 
} 

Answer 7

Đó là cách tốt nhất để loại bỏ các tròn trong IOS.

textarea, 
input[type="text"], 
input[type="button"], 
input[type="submit"] { 
    -webkit-appearance: none; 
    border-radius: 0; 
} 

Lưu ý: Vui lòng không sử dụng mã này cho tùy chọn Chọn. Nó sẽ có vấn đề về lựa chọn của chúng tôi.

Answer 8

Nếu bạn sử dụng normalize.css, biểu định kiểu đó sẽ làm điều gì đó như input[type="search"] { -webkit-appearance: textfield; }.

Tính năng này có độ đặc hiệu cao hơn một bộ chọn lớp đơn lẻ như .foo, vì vậy, hãy lưu ý rằng bạn không thể thực hiện chỉ .my-field { -webkit-appearance: none; }.Nếu bạn không có cách nào tốt hơn để đạt được các đặc quyền, điều này sẽ giúp:

.my-field { -webkit-appearance: none !important; }

Answer 9

Hãy Thử này một:

thử thêm input Css như thế này:

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

Answer 10

Các chấp nhận nút radio trả lời được thực hiện biến mất trên Chrome. Đây hoạt động:

input:not([type="radio"]):not([type="checkbox"]) { 
    -webkit-appearance: none; 
    border-radius: 0; 
} 

Answer 11

Để làm cho các nút đúng trên Safari và các trình duyệt khác, bạn sẽ cần phải cung cấp một phong cách cụ thể cho các nút trong Ngoài việc thiết lập webkit-xuất hiện không ai sánh kịp, ví dụ:

border-radius: 0; 
-webkit-appearance: none; 
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7); 
border: 1px solid #afafaf