[html] Styling a disabled input with css only

I have sort of a strange situation. I'm trying to style a disabled input button because I have an annoying hover turning the text to white. This makes it confusing to the user because its acting like a normal button.

I have tried a few things, mainly css and a few jQuery things. I would like to keep this in css if at all posable.

This is my html, sorry it is in a larvel form helper.

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

and this is what the browser generates

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

and I was working on something like this

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

Any help would be wonderful!

A space in a CSS selector selects child elements.

.btn input

This is basically what you wrote and it would select <input> elements within any element that has the btn class.

I think you're looking for

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

This would select <input> elements with the disabled attribute and the btn class in the three different states of hover, active and focus.

Let's just say you have 3 buttons:

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

To style the disabled button you can use the following css:

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

This will only affect the button which is disabled.

To stop the color changing when hovering you can use this too:

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

You can also avoid this by using a css-reset.