Style Disabled Button With Css

Style disabled button with CSS

For the disabled buttons you can use the :disabled pseudo class. It works for all the elements that have a disabled API (typically form elements).

For browsers/devices supporting CSS2 only, you can use the [disabled] selector.

As with the image, don't put an image in the button. Use CSS background-image with background-position and background-repeat. That way, the image dragging will not occur.

Selection problem: here is a link to the specific question:

How to disable text selection highlighting

Example for the disabled selector:

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

How to disable a button with style (CSS) using javascript?

Use the :disabled pseudo class to define how disabled buttons are supposed to differ visually:

.cbtn:disabled {
  opacity: 0.33;
  pointer-events: none;
}

const buttonIds = ["1st","2nd","3rd","4th","(a)","(b)","(c)","(d)","(e)","(f)","(g)","(h)","*(i)","(j)"];

function toggleDisabled(on) {
  for (const id of buttonIds) {
    const el = document.getElementById(id);
    el.disabled = typeof on !== 'boolean' ? !el.disabled : on;
  }
}

.cbtn {
  border: 1px solid;
  border-color: #555555;
  border-radius: 3px;
  padding: 7px 9px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  color: #000000;
  background-color: #e0f2f1;
  font-weight: bold;
  margin-bottom: 10px;
}

.cbtn:hover {
  background-color: #fafafa;
}

.cbtn:active {
  background-color: #e0f7fa;
  transform: translateY(1px);
  outline: none;
  box-shadow: 1px #666666;
}

.cbtn:disabled {
  opacity: 0.33;
  pointer-events: none;
}

<button class="cbtn" onclick="toggleDisabled(false)">Reset</button>
<br><br>
<button id="1st" onclick="toggleDisabled(true)">sample disable</button>
<button id="2nd">2</button>
<button id="3rd">3</button>
<button id="4th">4</button>
<br><br>
<button id='(a)' class="cbtn">(a)</button>
<button id='(b)' class="cbtn">(b)</button>
<button id='(c)' class="cbtn">(c)</button>
<button id='(d)' class="cbtn">(d)</button>
<button id='(e)' class="cbtn">(e)</button>
<button id='(f)' class="cbtn">(f)</button>
<button id='(g)' class="cbtn">(g)</button>
<button id='(h)' class="cbtn">(h)</button>
<button id='*(i)' class="cbtn">(i)</button>
<button id='(j)' class="cbtn">(j)</button>

Why CSS button selector [disabled] and &:disabled both works the same way?

The :disabled selector matches every disabled element (mostly used on form elements).

https://www.w3schools.com/cssref/sel_disabled.asp

While [*] matches any attribute on the element. You can for example target classes like this:

div[class='myClassName'] {
  color: blue
}

Here is another example of how you can use the attribute-selector:

button:disabled {  color: red;}
button[disabled='true'] {  color: blue}

<button disabled="true">my button</button><button disabled="false">my button</button>

Button type CSS and disabled button styling

First of all, you should remove the extra quote " at the end of the <button> opening tag:

<button id="question_1a" disabled">Next question</button>
<!--                      Here --^                    -->

Second, Since you are using <button> element you should use button[disabled] selector in order to select the disabled button.

Example Here.

button[disabled] {
    background-color:#CCC;
}

However there is a pseudo-class called :disabled which represents any disabled element. You could use button:disabled selector to achieve the same result:

button:disabled {
    background-color:#CCC;
}

Example Here.

From the MDN:

The :disabled CSS pseudo-class represents any disabled element. An
element is disabled if it can't be activated (e.g. selected, clicked
on or accept text input) or accept focus. The element also has an
enabled state, in which it can be activated or accept focus.

It's worth noting that :disabled pseudo-class is supported in IE9+

css button set to unclickable

I hope this is working (disabled class added successfully):-

$(".good-form > .actions a, .theButton").addClass('disabled');
// IF NOT THEN USE $(".theButton").addClass('disabled');

Now add CSS like below:-

.disabled{
  pointer-events: none;
}

This will also work (without additional CSS) :-

$(".good-form > .actions a, .theButton").prop('disabled',true); 
// or $(".theButton").prop('disabled',true);

Adding a class or style to a disabled button

If you mean you want to adjust the appearance of a disabled button, you do that with a CSS attribute presence selector (input[type=button][disabled]) or a CSS :disabled pseudo-class selector (input[type=button]:disabled):

input[type=button][disabled] {
  color: red;
  opacity: 0.5;
}
/* or: */
input[type=button]:disabled {
  color: red;
  opacity: 0.5;
}

The attribute selector works because a disabled button has a disabled attribute, and an enabled one does not. But in modern code, I'd probably use :disabled instead.

Example:

var btn = $("#toggle");
setInterval(function() {
  btn.prop("disabled", !btn.prop("disabled"));
}, 1000);

/* Here I've used each of the two possible options
   to provide half of the styling you wanted.
   You'd obviously just choose one of them and use
   it to handle both parts of the styling.
*/
input[type=button][disabled] {
    color: red;
}
input[type=button]:disabled {
    opacity: 0.5;
}

<input type="button" value="This is enabled">
<input type="button" disabled value="This is disabled">
<input id="toggle" type="button" value="This one goes back and forth">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Add CSS class to button disabled by Vue

You can put the same condition directly to the class directive:

 :class="{'disabled' : page === 1}"

How to enable/disable an html button based on scenarios?

You can either do this without JavaScript (requires a page refresh) or with JavaScript and have no refresh.

Simply use the disabled attribute:

<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button" disabled="disabled"></button>

And create a css style for it, if necessary. The example below shows a JavaScript solution. If the variable disableButton is set to true, the button will be disabled, else it can be clicked:

const disableButton = true; //change this value to false and the button will be clickableconst button = document.getElementById('checkout-button');
if (disableButton) button.disabled = "disabled";

.checkout-button {  width: 130px;  height: 35px;  background: #333;  border: none;  vertical-align: top;  margin-left: 35px;  cursor: pointer;  color: #fff;}
.checkout-button:disabled {  background: #999;  color: #555;  cursor: not-allowed;}

<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button">submit</button>

Style Disabled Button With Css