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

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

Firefox hoạt động hơi khác một chút. Xem trong video ở trên cách cài đặt

Button

Tôi chỉ nêu ra điều này để nói rằng, tôi hiểu rồi, các nút thực sự là những thứ kỳ lạ trong trình duyệt. Yếu tố trong hàng chục trình duyệt, thiết bị di động khác và ý tưởng rằng chúng tôi muốn tạo kiểu cho tất cả các yếu tố khác nhau đó trông giống hệt nhau (xem phần mở đầu của bài viết) và tôi có chút đồng cảm với những người muốn tránh điều này

Không bao giờ đau lòng để tham khảo Bình thường hóa

Bình thường hóa làm một số tiền tốt

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

Tôi hơi ngạc nhiên khi thấy WTF, Forms? . Nhưng các yếu tố hình thức chiếu roi thành hình thậm chí còn khó khăn hơn nhiều.

Kinda Thingy thử nghiệm phong cách

Tôi cảm thấy như câu trả lời cho điều này về cơ bản là một khối CSS lớn. Đó là những gì Andy đã cung cấp và rất có thể bạn có thể tự mình tìm ra một thứ chỉ bằng cách nặng tay hơn một chút so với thông thường trong việc thiết lập các quy tắc kiểu dáng bằng các nút của bạn

Tuy nhiên, tôi cảm thấy buộc phải tạo ra một máy kiểm tra nhỏ để bạn có thể bật và tắt các kiểu và xem tất cả chúng kết hợp với nhau như thế nào trong bất kỳ trình duyệt nào mà bạn đang sử dụng.

Xem các kiểu nút Nhất quán bút của Chris Coyier (@chriscoyier) trên CodePen

A11y

Điểm quan trọng nhất ở đây là sử dụng đúng các yếu tố gốc, vì bạn nhận được rất nhiều chức năng và khả năng truy cập miễn phí. Nhưng bạn cũng có thể có được kiểu dáng phù hợp

Trong khi chúng ta đang nói về các nút, tôi sẽ sử dụng cùng một câu trích dẫn mà tôi đã sử dụng trong bài đăng Khi nào nên sử dụng phần tử nút từ MDN

Cảnh báo. Hãy cẩn thận khi đánh dấu các liên kết có vai trò nút. Các nút dự kiến ​​sẽ được kích hoạt bằng phím Space, trong khi các liên kết dự kiến ​​sẽ được kích hoạt thông qua phím Enter. Nói cách khác, khi các liên kết được sử dụng để hoạt động giống như các nút, chỉ thêm

Button

1 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

Button

Button