CSS: Safari trên Mac không tuân theo phong cách nút Submit tôi

Question

tôi đã áp dụng CSS sau đây vào một FORM nút gửi:

font:normal 15px helvetica,arial,sans-serif; 
padding:6px; 

Trên Windows, không phụ thuộc vào trình duyệt (IE/Firefox/Chrome) , điều này làm tăng nút FORM gửi và cung cấp cho khoảng cách nút đệm 6px.

Tuy nhiên, trên OS X (Mac), nút gửi biểu mẫu không được cách điệu chút nào. Có nghĩa là kích thước phông chữ là mặc định và không có vùng đệm nào đang được áp dụng.

Bất kỳ ý tưởng nào về cách tôi có thể tạo nút gửi FORM lớn hơn trên OS X (Mac)?

Answer 1

Tạo nút hình ảnh. Safari sẽ không có nút kiểu hoặc hộp kiểm hoặc menu thả xuống, v.v.

Answer 2

Điều khiển biểu mẫu tạo kiểu rất có vấn đề. Xem this example - trong khi các trình duyệt khác áp dụng một số kiểu, tất cả các nút trông gần như giống hệt nhau trong Safari.

Một giải pháp là sử dụng <div> với thuộc tính JavaScript onclick. Bằng cách này, bạn có thể áp dụng CSS chuẩn thông thường. Tôi khuyên bạn nên bắt đầu với một nút sau đó sử dụng JS để chuyển đổi trong mã trông đẹp hơn như tăng cường tiến bộ.

Answer 3

Trong Safari 4, đệm và kích cỡ sẽ không có hiệu lực trên các nút gửi trừ khi bạn đặt nền hoặc đường viền. Ví dụ:

background: #ccc; /* without this, the other styles won't show up */  
font: normal 15px helvetica,arial,sans-serif; 
padding: 6px; 

Answer 4

Thay vì sử dụng <input type="submit" /> sử dụng <button type="submit">Submit Text</button>, nếu tôi nhớ không lầm, điều này có hỗ trợ tốt hơn cho stylings css.

Answer 5

Bạn cần phải thêm video này vào CSS của bạn:

input { 
-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 
}