Botón de estilo deshabilitado con CSS

Intento cambiar el estilo de un botón con una imagen incrustada como se ve en el siguiente Fiddle:

http://jsfiddle.net/krishnathota/xzBaZ/1/

En el ejemplo, no hay imágenes, me temo.

Estoy tratando de:

  1. Cambiar el background-color de background-color del botón cuando está deshabilitado
  2. Cambiar la imagen en el botón cuando está deshabilitada
  3. Deshabilitar el efecto de desplazamiento cuando está deshabilitado
  4. Cuando hace clic en la imagen en el botón y la arrastra, la imagen se puede ver por separado; Quiero evitar eso
  5. El texto en el botón se puede seleccionar. Quiero evitar eso también.

Intenté hacer en el button[disabled] . Pero algunos efectos no pudieron ser deshabilitados. como top: 1px; position: relative; top: 1px; position: relative; e imagen.

Para los botones desactivados, puede usar :disabled pseudo-elemento :disabled . Funciona para todos los elementos.

Para navegadores / dispositivos que solo son compatibles con CSS2, puede usar el selector [disabled] .

Al igual que con la imagen, no coloque una imagen en el botón. Use background-image CSS con background-position background-repeat . De esta forma, no se producirá el arrastre de la imagen.

Problema de selección: aquí hay un enlace a la pregunta específica:

  • ¿Cómo deshabilitar resaltar la selección de texto?

Ejemplo para el selector desactivado:

 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; } 
 

Creo que deberías poder seleccionar un botón desactivado usando lo siguiente:

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

Agrega el código a continuación en tu página. Confíe en mí, no hay cambios en los eventos de los botones, para deshabilitar / habilitar el botón simplemente agregar / eliminar la clase de botón en Javascript.

Método 1

    

Método 2

   

Para aplicar el botón gris CSS para un botón desactivado.

 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; } 
 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, { // apply css here what u like it will definitely work... } 

Cuando su botón está deshabilitado, establece directamente la opacidad. Entonces, antes que nada, debemos establecer su opacidad como

 .v-button{ opacity:1; } 

Para todos nosotros que usamos bootstrap, podemos cambiar el estilo agregando la clase “deshabilitada” y usando lo siguiente:

HTML

  

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; } 

Recuerde que agregar la clase “deshabilitada” no necesariamente deshabilita el botón, por ejemplo, en un formulario de envío. Para deshabilitar su comportamiento, use la propiedad deshabilitada:

  

Un violín que funciona con algunos ejemplos está disponible aquí .

Por CSS:

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

Les puedes agregar cualquier decoración a ese botón. Para cambiar el estado, puede usar jquery

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