Kiểu dáng đầu vào của iPad

Question

Tôi có mâu thuẫn trong việc tạo kiểu cho nút biểu mẫu chủ yếu khi xem trong iPad. Vì một số lý do, kiểu CSS cho background-color và padding không áp dụng trong iPad. Tôi nhận được nút tìm kiếm mặc định, với các góc dốc và tròn, mà không phải là những gì tôi muốn. Tôi cũng muốn tránh sử dụng một hình ảnh.

CSS

.mailBtn { 
    background: #fff; 
    border:0; 
    color: #000; 
    font: 0.625em 'SansPro Light',sans-serif; 
    margin: 0 0 0 -3px; 
    padding: 11px 7px 10px; 
    text-transform: uppercase; 
} 

HTML

<input type="submit" value="Send" class="mailBtn"> 

Bất kỳ ý tưởng như thế nào tôi có thể giữ phong cách nhất quán trên các nền tảng với CSS tinh khiết?

Answer 1

Bạn cần sử dụng -webkit-appearance:none trong lớp .mailBtn của mình. Ngoài ra, nếu bạn đã làm tròn các góc tại các trường input, bạn có thể sử dụng -webkit-border-radius:0.

Tôi thường reset cả tài sản trong yếu tố hình thức của tôi như dưới đây:

input, textarea, button { 
    -webkit-appearance: none; /*Safari/Chrome*/ 
    -moz-appearance: none; /*Firefox*/ 
    -ms-appearance: none; /*IE*/ 
    -o-appearance: none; /*Opera*/ 
    appearance: none; 

    -webkit-border-radius: 0; 
} 

... vì vậy mà tôi giữ sự nhất quán phong cách giữa các trình duyệt.

Answer 2

Bạn có thể tìm kiếm

-webkit-appearance: none; 

• Safari CSS ghi chú trên --webkit-xuất hiện
• Mozilla Developer Network của --moz-xuất hiện

Ref Link