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

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 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 đầu vào và hiển thị chúng theo hình chữ nhật như dự định không?

Trên iOS 5 trở lên, ol 'tốt border-radiusthực hiện thủ thuật:

input {
    border-radius: 0;
}

Nếu bạn chỉ phải xóa các góc được làm tròn trên iOS hoặc vì lý do nào đó không thể bình thường hóa các góc được làm tròn trên các nền tảng, hãy sử dụng thuộc tính tiền tố -webkit-border-radiusthay thế, vẫn được hỗ trợ. Tất nhiên lưu ý rằng Apple có thể chọn bỏ hỗ trợ cho 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 dành riêng cho nền tảng khác của họ có thể họ sẽ giữ nó xung quanh.

Trên các phiên bản cũ, bạn phải đặt -webkit-appearance: nonethay thế:

input {
    -webkit-appearance: none;
}

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

Hãy thử thêm -webkit-border-radius:0px;vào.

Đây là cách tốt nhất để loại bỏ làm 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.

Câu trả lời được chấp nhận đã khiến nút radio biến mất trên Chrome. Những công việc này:

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

Đây là giải pháp hoàn chỉnh cho La bàn (SCSS):

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

Đối với tôi trên iOS 5.1.1 trên iPhone 3GS, tôi phải xóa kiểu dáng của trường tìm kiếm và đặt nó theo kiểu dự định

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 phong cách bản địa. Điều này cũng là cho một webview trên một ứng dụng gốc.

Tôi đã có cùng một vấn đề nhưng chỉ cho nút gửi. Cần thiết để loại bỏ bóng bên trong và các góc tròn -

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

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

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

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

Hãy thử cái này:

Hãy thử thêm inputCss như thế này:

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

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

Để hiển thị các nút chính xác trên Safari và các trình duyệt khác, bạn sẽ cần cung cấp một kiểu cụ thể cho các nút bên cạnh việc đặt giao diện webkit thành không, ví dụ:

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