Ik'm probeer de stijl van een knop met een ingesloten afbeelding te veranderen zoals te zien is in de volgende Fiddle:
In het voorbeeld zijn er geen afbeeldingen, ben ik bang.
Ik'm probeer het:
achtergrondkleur
van de knop te veranderen als hij uitgeschakeld isIk heb geprobeerd in button[disabled]
te doen. Maar sommige effecten konden niet worden uitgeschakeld. zoals
top: 1px; position: relative;
en image.
Voor de uitgeschakelde knoppen kunt u het :disabled
pseudo-element gebruiken. Het werkt voor alle elementen.
Voor browsers/apparaten die alleen CSS2 ondersteunen, kunt u de [disabled]
selector gebruiken.
Net als bij de afbeelding, plaats geen afbeelding in de knop. Gebruik CSS background-image
met background-position
en background-repeat
. Op die manier zal het verslepen van de afbeelding niet optreden.
Selectie probleem: hier is een link naar de specifieke vraag:
Voorbeeld voor de uitgeschakelde 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>