Vô hiệu hóa nút CSS

css1 phút đọc

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về cách tạo kiểu cho nút bị vô hiệu hóa (html) bằng cách sử dụng css

Hãy xem xét, chúng tôi có một nút html với thuộc tính disabled

<button disabled="true" class="login">Loginbutton>

Tạo kiểu cho nút bị vô hiệu hóa

Để tạo kiểu cho nút bị vô hiệu hóa, chúng ta có thể sử dụng bộ chọn lớp giả :disabled trong css

Đây là một ví dụ, đặt màu phông chữ background cho nút disabled

.login:disabled{
   background:  #fff;
   color: #ccc;
   cursor: no-drop;
}

Nếu bạn đang sử dụng phần tử input làm nút thì bạn có thể thêm các kiểu bị vô hiệu hóa như thế này

input[type="text"]:disabled{
   background:  #fff;
   color: #ccc;
   cursor: no-drop;
}

• Chia sẻ
• Các nút là một trong những thành phần giao diện người dùng phổ biến nhất. Nó được sử dụng để người dùng tương tác với một hệ thống và thực hiện hành động bằng cách thực hiện các lựa chọn. Nút vô hiệu hóa CSS thuần túy được sử dụng để tạo nút bị vô hiệu hóa. Để tạo nút bị vô hiệu hóa, chúng ta sẽ sử dụng lớp Pure-button-disabled CSS thuần túy với lớp nút thuần túy. Chúng tôi cũng có thể tạo một nút bị vô hiệu hóa bằng thuộc tính bị vô hiệu hóa

  Trong bài đăng trên blog này, chúng tôi sẽ xem xét “Cách tắt nút bằng CSS” trên trang web và tìm hiểu các khía cạnh khác nhau liên quan đến nó

  nội dung

  Làm cách nào để tắt nút bằng CSS?

  Các nút được đặt trên một trang web để thực hiện một số sự kiện. Khi người dùng nhấp vào nó thì điều gì đó sẽ xảy ra trên trang đó theo các hành động được mã hóa bởi lập trình viên

  Có một số tình huống nhất định mà chúng tôi muốn hiển thị nút nhưng nó sẽ chỉ có thể nhấp được sau khi một điều kiện nhất định được đáp ứng. Ví dụ là trang Đăng nhập, chúng tôi muốn người dùng nhập tên người dùng và mật khẩu sau đó anh ta có thể nhấp vào nút đăng nhập để vào trong ứng dụng. Khi người dùng chưa nhập thông tin chi tiết thì việc nhấp vào nút sẽ không có tác dụng nên có thể vô hiệu hóa nó

  Sau khi tắt nút, nút này sẽ ngừng thực hiện bất kỳ hành động nào và theo kiểu mặc định, nút này sẽ chuyển sang màu xám. Khi người dùng nhấp vào nó, sự kiện chính sẽ không được thực hiện

  Các nút bị tắt cũng có thể được tạo kiểu với sự trợ giúp của các kiểu CSS. Ta cũng có thể thay đổi con trỏ chuột khi người dùng rê chuột vào nút để người dùng dễ hiểu là nút đó đang bị vô hiệu hóa

  Hãy xem mã để vô hiệu hóa nút bằng CSS. -

  HTML. -

      
  
          I am not Disabled
          I am Disabled
      

  Kết quả. -

  Làm cách nào để tạo kiểu cho nút bị vô hiệu hóa bằng CSS?

  Cần phải định kiểu một nút bị vô hiệu hóa theo cách thích hợp để người dùng có thể hiểu nó bị vô hiệu hóa. Nếu người dùng không thể hiểu được, anh ta sẽ tiếp tục nhấp vào nút và sẽ nghĩ rằng có điều gì đó không ổn trong trang web này

  Thông thường, nút bị vô hiệu hóa có thể được hiển thị dưới dạng màu xám với giá trị con trỏ không được phép. Các biến thể khác nhau của màu xám có thể được áp dụng theo sở thích

  Văn bản tiêu đề cũng giúp cung cấp thông tin nhanh chóng cho người dùng. Văn bản tiêu đề tự động xuất hiện khi người dùng di chuột qua nút

  Kiểu của nút bị vô hiệu hóa phải khác với kiểu của nút bình thường. Vì vậy, có thể có 2 bộ kiểu khác nhau được xác định trong CSS cho nút bình thường và nút bị vô hiệu hóa

  Mã bên dưới được sử dụng để tạo kiểu cho các nút bị vô hiệu hóa. -

  CSS. -

      button:disabled,
      button[disabled] {
          border: 1px solid #999999;
          background-color: darkgrey;
          color: #fff;
          padding: 10px;
          cursor: not-allowed;
      }
  
      .btn {
          border: 1px solid #999999;
          background-color: blue;
          color: #fff;
          padding: 10px;
      }  

  HTML. -

      
  
          I am not Disabled
          I am Disabled
      

  Kết quả. -

  Làm cách nào để tắt hiệu ứng di chuột khi nút bị tắt CSS?

  Khi hiệu ứng di chuột của nút được xác định theo kiểu thì nó sẽ được áp dụng cho tất cả các nút. Nút có thể được bật hoặc tắt theo cùng một kiểu áp dụng cho cả hai mà không có sự khác biệt

  Chúng tôi có thể sửa đổi hành vi mặc định này và chỉ áp dụng kiểu cho các nút đã bật trên trang web. Đối với các nút bị tắt, kiểu hiệu ứng di chuột này sẽ không được áp dụng

  Thay đổi hiệu ứng di chuột là cần thiết cho các nút bị vô hiệu hóa vì người dùng luôn di chuột qua các nút trước khi nhấp vào nó. Nếu hiệu ứng di chuột cho nút bị vô hiệu hóa giống như nút được bật thì sẽ không có sự khác biệt nào & nút bị vô hiệu hóa có thể trông giống như một nút được bật

  Kiểu cho nút bị vô hiệu hóa thường mờ nhạt. Vì vậy, hiệu ứng di chuột cũng có thể được tạo kiểu theo cùng một mẫu để duy trì tính nhất quán

  Làm cách nào để tắt nút trong CSS?

  Nút Tắt theo Chương trình với Lớp CSS . Một lần nữa, chúng tôi chọn nút và đính kèm trình xử lý sự kiện nhấp chuột. Sau đó, trong trình xử lý nhấp chuột, chúng ta cần thêm lớp bị vô hiệu hóa bằng classList. thêm ("đã tắt"). Toggling a CSS class on an HTML button element is similar to toggling the disabled attribute. Once again, we select the button and attach a click event listener. Then in the click handler we need to add the disabled class using classList. add("disabled") .

  Làm cách nào để tắt CSS nhấp vào nút?

  Để tắt sự kiện nhấp chuột trong HTML, thuộc tính “con trỏ-sự kiện” của CSS được sử dụng. Vì mục đích này, hãy thêm một phần tử HTML và đặt giá trị của thuộc tính pointer-events là “none” để tắt sự kiện nhấp chuột của nó.

  Bạn có thể tạo một nút Không thể nhấp được không?

  Thuộc tính bị vô hiệu hóa là thuộc tính boolean. Khi xuất hiện, nó chỉ định rằng nút này sẽ bị tắt. Nút bị tắt sẽ không sử dụng được và không thể nhấp được . Thuộc tính bị vô hiệu hóa có thể được đặt để ngăn người dùng nhấp vào nút cho đến khi một số điều kiện khác được đáp ứng (như chọn hộp kiểm, v.v. ).