Tại sao màu sắc của nút gửi thay đổi lạ?

Question

Đây là màu mặc định của nút gửi, không có kiểu nào cụ thể. (Sử dụng chrome)

Và đây là nút sau khi sử dụng input[type="submit"]{border-radius: 2px;} này.

Như bạn thấy màu sắc của một thứ hai, thay đổi đột ngột mà không có lý do cụ thể và cũng có thể bạn có thể nhìn thấy cái bóng bên phải và bên dưới cùng của biên giới. (body{direction:rtl;})

Lý do là gì? Tôi chỉ cần nút mặc định có đường viền tròn (không còn nữa). Có giải pháp nào không? hoặc tôi nên sử dụng một hình ảnh cho điều này?

JSFiddle here.

Answer 1

Nút thông thường, không cố định là phần tử giao diện người dùng hệ thống (hoặc trong trường hợp của Chrome, một tùy chỉnh). Do đó, nó có thể không có một CSS tương đương. Vì vậy, khi bạn cố gắng tạo kiểu cho nút, nó sẽ trở lại thành một nút đơn giản là có thể được tạo kiểu nhưng có màu sắc khác nhau.

Bạn sẽ phải hoàn toàn tiếp quản và chỉ định mọi phần của nút để có giao diện tương tự (và ngay cả khi bạn làm điều này, người dùng Firefox sử dụng các nút mặc định của hệ thống sẽ bị sốc). Nếu bạn thích nhìn đó, dưới đây là cách để tái tạo nó ở một mức độ (Demo):

border: thin solid gray; 
border-radius: 2px; 
padding: 2px 4px; 
background-image: linear-gradient(white, lightgray); 

Chưa kể :hover và :active phong cách nhà nước. Tại sao không tận dụng cơ hội để tìm ra một giao diện tùy chỉnh đẹp phù hợp với trang của bạn?

Answer 2

Nếu bạn đang cố gắng tạo kiểu cho nút gửi biểu mẫu, bạn sẽ sử dụng phần tử button hoàn toàn có thể tạo kiểu tốt hơn rất nhiều. Phần tử input type=submit rất khó để tạo kiểu và không nhất quán trên các trình duyệt. <button> sẽ cho phép bạn làm bất cứ điều gì với nó.