Diseñar una entrada deshabilitada solo con css

Tengo una especie de situación extraña. Estoy tratando de diseñar un botón de entrada deshabilitado porque tengo un molesto desplazamiento que convierte el texto en blanco. Esto lo hace confuso para el usuario porque actúa como un botón normal.

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

Este es mi html, lo siento, está en un asistente de forma larvel.

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

y esto es lo que genera el navegador

<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change">

y yo 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!

Utilice este CSS (js Ejemplo de violín):

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

Tienes que escribir el elemento más exterior a la izquierda y el elemento más interior a la derecha.

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

Yo preferiría :disabled encima [disabled]vea esta pregunta para una discusión: ¿Debo usar CSS: pseudo-clase deshabilitada o [disabled] selector de atributos o es una cuestión de opinión?

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

Digamos que tienes 3 botones:

<input type="button" disabled="disabled" value="hello world">
<input type="button" disabled value="hello world">
<input type="button" value="hello world">

Para diseñar el botón deshabilitado, puede usar el siguiente css:

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

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

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

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

También puede evitar esto usando css-reset.

Un espacio en un selector de CSS selecciona elementos secundarios.

.btn input

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

creo que estas buscando

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

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