Style gehandicapte knop met CSS

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>

Antwoord 2, autoriteit 21%

Ik denk dat je een uitgeschakelde knop als volgt zou moeten kunnen selecteren:

button[disabled=disabled], button:disabled {
    // your css rules
}

Antwoord 3, autoriteit 9%

Voeg de onderstaande code toe aan je pagina. Geloof me, er zijn geen wijzigingen aangebracht in knopgebeurtenissen, om de knop in of uit te schakelen, voeg eenvoudig de knopklasse in Javascript toe / verwijder deze.

Methode 1

<asp Button ID="btnSave" CssClass="disabledContent" runat="server" />
<style type="text/css">
    .disabledContent 
    {
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
    }
    .disabledContent > * 
    {
        pointer-events:none;
    }
</style>

Methode 2

<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />
<style type="text/css">
    .btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;
        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;
        }
</style>

Antwoord 4, autoriteit 3%

Om grijze knop-CSS toe te passen op een uitgeschakelde knop.

button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
  background-color: #ddd;
  background: #ddd;
}

Antwoord 5, autoriteit 2%

Door CSS:

.disable{
   cursor: not-allowed;
   pointer-events: none;
}

Hiermee kun je elke versiering aan die knop toevoegen.
Voor het wijzigen van de status kunt u jQuery

. gebruiken

$("#id").toggleClass('disable');

Antwoord 6, autoriteit 2%

Voor iedereen die bootstrap gebruikt, kunt u de stijl wijzigen door de klasse “disabled” toe te voegen en het volgende te gebruiken:

HTML

<button type="button"class="btn disabled">Text</button>

CSS

.btn:disabled,
.btn.disabled{
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}

Houd er rekening mee dat het toevoegen van de klasse “uitgeschakeld” de knop niet noodzakelijkerwijs uitschakelt, bijvoorbeeld in een verzendformulier. Gebruik de eigenschap uitgeschakeld om het gedrag uit te schakelen:

<button type="button"class="btn disabled" disabled="disabled">Text</button>

Een werkende viool met enkele voorbeelden is hierbeschikbaar.

Antwoord 7

Als uw knop is uitgeschakeld, wordt de dekking direct ingesteld. Dus eerst en vooral moeten we de dekking instellen als

.v-button{
    opacity:1;    
}

Antwoord 8

overweeg de volgende oplossing

.disable-button{ 
  pointer-events: none; 
  background-color: #edf1f2;
}

Antwoord 9

input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
  //  apply css here what u like it will definitely work...
}

Antwoord 10

Moet css toepassen zoals hieronder:

button:disabled,button[disabled]{
    background-color: #cccccc;
    cursor:not-allowed !important;
  }

Antwoord 11

En als u uw stijlbestand (.css) wijzigt in SASS (.scss), gebruik dan:

button {
  background-color: #007700;
  &:disabled {
    background-color: #cccccc;
  }
}