Estoy tratando de cambiar el estilo de un botón con una imagen incrustada como se ve en el siguiente Fiddle:
En el ejemplo no hay imágenes, me temo.
Yo'lo estoy intentando:
color de fondo
del botón cuando está desactivadoHe intentado hacer en button[disabled]
. Pero algunos efectos no pudieron ser deshabilitados. como
top: 1px; position: relative;
y image.
Para los botones deshabilitados puedes utilizar el pseudo-elemento :disabled
. Funciona para todos los elementos.
Para los navegadores/dispositivos que sólo soportan CSS2, puedes utilizar el selector [disabled]
.
Al igual que con la imagen, no pongas una imagen en el botón. Usa CSS background-image
con background-position
y background-repeat
. Así no se producirá el arrastre de la imagen.
Problema de selección: aquí hay un enlace a la pregunta específica:
Ejemplo para el selector desactivado:
begin snippet: js hide: false console: true babel: false -->
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>
...fin del fragmento..;