Làm cách nào để tạo kiểu cho một nút cụ thể trong css?

Button

cho các nút. Như trong, họ chỉ tiếp cận với bất kỳ HTML chung chung, không có kiểu dáng nào tiện dụng và xây dựng nó khi cần thiết. Andy Bell giải thích tại sao một nút thực sự tốt hơn

Vì vậy, các yếu tố rất khó để tạo kiểu phải không? . Bạn thấy đấy, khi bạn sử dụng , bạn sẽ nhận được các sự kiện bàn phím miễn phí. Bạn cũng đang giúp đỡ người dùng trình đọc màn hình vì nó sẽ thông báo chính xác phần tử

Và đây là Andy một lần nữa giúp bạn với một đoạn CSS giúp bạn có một nút được tạo kiểu rõ ràng

Xem Pen Button Pal — một số kiểu nút cơ bản của Andy Bell [@hankchizljaw] trên CodePen

Đó là phong cách có thể là rào cản tinh thần

Nó hơi dễ hiểu. Các nút là lạ. Chúng có nhiều kiểu dáng mặc định [xuất phát từ “Biểu định kiểu tác nhân người dùng”] khác nhau giữa các trình duyệt và có nghĩa là bạn phải làm việc để có được chúng chính xác theo cách bạn muốn

Thấy tất cả sự kỳ lạ ở đó?

• Không có bất kỳ kiểu dáng nào, nút hơi nhỏ và có đường viền/bán kính đường viền/bóng hộp gốc đang diễn ra
• Chỉ bằng cách đặt kích thước phông chữ, chúng tôi sẽ mất tất cả các giá trị mặc định đó, nhưng nó có giao diện mặc định mới, giao diện có đường viền và các góc vuông, nền chuyển màu và không có bóng hộp. Đây thực chất là

  Button

  2
• Các nút có họ phông chữ riêng, vì vậy đừng kế thừa từ tầng trừ khi bạn yêu cầu nó

Đây là biểu định kiểu tác nhân người dùng của Chrome cho các nút

Button0 đã xóa đường viền trong Chrome cũng như nền?

Button1 là không đủ. Cũng cần phải thêm một trình xử lý sự kiện chính lắng nghe phím Space để nhất quán với các nút gốc

Bạn không cần

Button

1 trên vì chúng đã là các nút, nhưng nếu bạn định tạo bất kỳ phần tử nào khác giống như nút, thì bạn còn nhiều việc phải làm để bắt chước chức năng

Ngoài ra, đừng quên các kiểu

Button

4 và

Button

5. Một khi bạn đã xoay sở với các kiểu cho trạng thái mặc định, điều này sẽ không quá khó, nhưng bạn chắc chắn cần chúng