iOS buộc các góc tròn và ánh sáng chói trên đầu vào

Các thiết bị iOS thêm rất nhiều kiểu khó chịu trên đầu vào biểu mẫu, đặc biệt là trên đầu vào [type = submit]. Dưới đây là biểu mẫu tìm kiếm đơn giản giống nhau trên trình duyệt máy tính để bàn và trên iPad.

Máy tính để bàn:

iPad:

Đầu vào [type = text] sử dụng bộ chèn bóng hộp CSS và tôi thậm chí đã chỉ định -webkit-border-radius: none; mà dường như bị ghi đè. Màu sắc và hình dạng của nút nhập [type = submit] của tôi hoàn toàn bị biến dạng trên iPad. Có ai biết tôi có thể làm gì để sửa lỗi này không? Cảm ơn trước.

Phiên bản tôi đã làm việc là:

input {
    -webkit-appearance: none;
}

Trong một số phiên bản trình duyệt webkit, bạn cũng có thể phải đối mặt với tình trạng border-radiusvẫn tồn tại. Đặt lại với những điều sau:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

Điều này có thể được mở rộng để áp dụng cho tất cả các webkit theo kiểu formthành phần như input, select, buttonhoặc textarea.

Tham chiếu đến câu hỏi ban đầu, bạn sẽ không sử dụng giá trị 'none' khi xóa bất kỳ phần tử css nào dựa trên đơn vị. Cũng xin lưu ý rằng điều này ẩn các hộp kiểm trong Chrome, vì vậy có thể sử dụng một cái gì đó tương tự input[type=text]hoặc input:not([type=checkbox]), input:not([type=radio])thay thế.

Bạn có thể loại bỏ một số kiểu mẫu, đầu vào, v.v. của webkit bằng cách này:

input, textarea, select {
   -webkit-appearance: none;
}

Đối với nút gửi, không sử dụng:

<input type="submit" class="yourstylehere" value="submit" />

Thay vào đó, hãy sử dụng thẻ nút:

<button type="submit" class="yourstylehere">Submit</button>

Điều này đã làm việc cho tôi.

có một cái nhìn để bình thường hóa.css

Có một bản demo nơi bạn có thể kiểm tra các phần tử biểu mẫu và xem chúng trông như thế nào trong ios. Có nhiều thuộc tính định hướng webkit.

Đây là những gì tôi sử dụng trong các dự án của mình

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}

Bạn cũng gặp sự cố này trong một số trình duyệt nếu bạn có những điều sau:

<a class="btn btn-primary" href="#" type="button">Link</a>

thay vì:

<a class="btn btn-primary" href="#" role="button">Link</a>

Điều này có thể xảy ra nếu bạn thay đổi phần tử đầu vào cho phần tử anker và quên thay đổi typethành role.

Tôi đã gặp sự cố này trên cả Chrome và Safari trên IPad của mình.