Css class for disabled button

Need CSS for disabled button

Following is a button class im using in my application. Can someone make a class for disabled button?

.myButton < -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9)); background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0); background-color:#f9f9f9; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #dcdcdc; display:inline-block; cursor:pointer; color:#666666; font-family:Arial; font-size:10px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:0px 1px 0px #ffffff; >.myButton:hover < background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9)); background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0); background-color:#e9e9e9; >.myButton:active

2 Answers 2

the above is the code for disabled button in bootstrap or css pointer-events:none; in the button makes button disabled

 **Simple code to disabled button** Click Me! 

this doesnt work because of the class applied to button. i need another class to give disabled look to button

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.21.43541

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Easily Disable a Button with JavaScript or CSS (3 Examples)

We should also lighten the button’s opacity by about 33% (like Bootstrap’s disabled class does). In this post, I will show full JavaScript and CSS code for disabling HTML buttons.

Finally, make sure the button cannot be tabbed into and that the button is disabled for screen readers. We’ll see how to do that below.

The Resources section has a live Code Sandbox demo link.

In these examples I applied the following styling to my button elements:

Simple JavaScript Code for Disabling an HTML Button

Here are the steps for disabling a button with JavaScript:

• Select the button using document.getElementById, document.querySelector, or your preferred method
• Attach a click event listener
• Set the disabled attribute to false in the click handler (this requires a reference to the button)

It is important to pass a reference to the button into the click handler. Take a look at the below code to see how I accomplished this:

//HTML Button JS Toggle Disable //JS Click Event Listener const jsDisableButton = document.getElementById("jsDisableButton"); if (jsDisableButton) < jsDisableButton.addEventListener("click", () =>handleJSBtnClick(jsDisableButton) ); > //JS Click Handler const handleJSBtnClick = (jsDisableButton) => < jsDisableButton.disabled = true; console.log("JS Disabled"); >;

This code gets the job done, but I recommend some basic styling on the button when it is disabled:

The above selector queries for the disabled pseudo class on button elements.

This styling is important because the opacity gives visual indication that the button is unclickable. Removing pointer events keeps hover and click events from occurring. If we only set cursor: default; then the cursor looks inactive but hover and click events can still occur.

You also have the option of passing the click event to the handler. Here’s what the updated code looks like (with TypeScript):

const jsDisableButton = document.getElementById( "jsDisable" ) as HTMLButtonElement; if (jsDisableButton) < jsDisableButton.addEventListener("click", (event: MouseEvent) =>handleJSBtnClick(event, jsDisableButton) ); >

CSS Styling for Disabling an HTML Button

We can set a couple of style properties on a button to effectively make it disabled without using the disabled attribute.

The most basic property is pointer-events: none; . This makes the element unable to register clicks or hovers. I also recommend reducing the opacity so the button renders as a lighter color.

.disabled < pointer-events: none; opacity: .65; >//HTML CSS Permanent Disable

These can easily be applied using a class on the element.

You may have noticed that I recommended adding both of these styles in the previous section where we set the button attribute disabled=true . Styling with these properties is good practice on any disabled button.

One disadvantage of using a CSS approach is that users can still tab in to the button and ‘click’ it by pressing enter . Interestingly, this first triggers a keypress event and then triggers a click event.

The two solutions to this are setting tabindex to -1 or adding a keypress event listener and preventing the default behavior. Both are described below.

Programmatically Disable Button with CSS Class

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») .

 CSS Toggle Disable const handleCSSBtnClick = ( event, cssDisabledButton ) => < cssDisabledButton.classList.add("disabled"); console.log(event); >; const cssDisabledButton = document.getElementById("cssDisable"); if (cssDisabledButton) < cssDisabledButton.addEventListener("click", (event) =>< handleCSSBtnClick(event, cssDisabledButton); >); cssDisabledButton.addEventListener("keypress", (event) => < event.preventDefault(); >); >

I also included the code for adding a keypress listener in case the user tabs into the button and presses enter . Later I will show how to eliminate tabbing.

Disabled Button ARIA Considerations

Users requiring screen readers and non-mouse users need to be supported when a button is disabled.

Screen readers need the aria-disabled attribute to be set to true on the button. This indicates that the element is perceivable but not operable, according to MDN.

Next, the tabIndex attribute needs to be set to -1 while the button is disabled. This keeps users from tabbing into a disabled element and interacting with it through the keyboard.

Here’s an example button that has both attributes set.

Resources

Code Sandbox Link (This includes TypeScript as well)

Источник