Diseñar una entrada deshabilitada solo con CSS

Tengo una especie de situación extraña. Intento modificar el estilo de un botón de entrada deshabilitado porque tengo un elemento emergente molesto que convierte el texto en blanco. Esto lo hace confuso para el usuario porque actúa como un botón normal.

He intentado algunas cosas, principalmente css y algunas cosas jQuery. Me gustaría mantener esto en CSS si es posible.

Este es mi html, lo siento en forma de ayudante.

{{ Form::submit('Change', array_merge($design_project->is_locked ? ['disabled' => 'disabled'] : [], ['class' => 'btn btn-blue span3'])) }} 

y esto es lo que genera el navegador

  

y estaba trabajando en algo como esto

 .btn:hover input[disabled], .btn:active input[disabled], .btn:focus input[disabled]{ color:green } 

¡Cualquier ayuda sería maravillosa!

Use este CSS ( ejemplo jsFiddle ):

 input:disabled.btn:hover, input:disabled.btn:active, input:disabled.btn:focus { color: green } 

Debes escribir el elemento más externo a la izquierda y el elemento más interno a la derecha.

.btn:hover input:disabled seleccionará cualquier elemento de entrada deshabilitado que esté contenido en un elemento con una clase btn que esté actualmente sobre el usuario.

Yo preferiría :disabled sobre [disabled] , ver esta pregunta para una discusión: ¿Debería usar CSS: deshabilitado pseudo-clase o selector de atributo [deshabilitado] o es una cuestión de opinión?


Por cierto, Laravel (PHP) genera el HTML, no el navegador.

Digamos que tienes 3 botones:

    

Para darle estilo al botón deshabilitado, puede usar el siguiente CSS:

 input[type="button"]:disabled{ color:#000; } 

Esto solo afectará el botón que está deshabilitado.

Para detener el cambio de color al pasar el ratón, puede usar esto también:

 input[type="button"]:disabled:hover{ color:#000; } 

También puede evitar esto usando un css-reset.

Un espacio en un selector de CSS selecciona elementos secundarios.

 .btn input 

Esto es básicamente lo que escribiste y seleccionaría elementos dentro de cualquier elemento que tenga la clase btn .

Creo que estás buscando

 input[disabled].btn:hover, input[disabled].btn:active, input[disabled].btn:focus 

Esto seleccionaría elementos con el atributo disabled y la clase btn en los tres estados diferentes de hover , active y focus .