Các lực lượng iOS làm tròn các góc và độ chói trên các đầu vào

Question

Các thiết bị iOS thêm rất nhiều kiểu gây phiền nhiễu vào đầu vào biểu mẫu, đặc biệt là trên đầu vào [loại = gửi]. Hiển thị bên dưới là cùng một biểu mẫu tìm kiếm đơn giản trên trình duyệt trên máy tính để bàn và trên iPad.

Desktop:

iPad:

Các đầu vào [type = text] sử dụng một hình chữ nhật hộp CSS bóng và tôi thậm chí quy định -webkit-border-radius: không ai; mà dường như bị ghi đè. Màu sắc và hình dạng của nút [type = submit] đầu vào của tôi bị bastardized hoàn toàn 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.

Answer 1

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 các border-radius vẫn đang được tại chỗ. Thiết lập lại với những điều sau đây:

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 kiểu form thành phần như input, select, button hoặc textarea.

Trong 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 dựa trên đơn vị nào. Cũng lưu ý rằng các hộp kiểm ẩn này trong Chrome, vì vậy, có thể sử dụng một cái gì đó như input[type=text] hoặc input:not([type=checkbox]), input:not([type=radio]) thay thế.

Answer 2

có một cái nhìn để normalize.css

Có một bản demo, nơi bạn có thể kiểm tra các yếu tố hình thức và xem cách họ trông giống như trong ios. Có nhiều thuộc tính định hướng webkit.

Answer 3

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

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

Thay vì sử dụng thẻ nút:

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

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

Answer 4

Bạn có thể thoát khỏi một số hình thức hơn webkits, đầu vào vv styling với điều này:

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

Answer 5

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

* { 
    -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; 
}