html - Styling a disabled input with css only

Question

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!

Answer 1

Use this CSS (jsFiddle example):

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

You have to write the most outer element on the left and the most inner element on the right.

.btn:hover input:disabled would select any disabled input elements contained in an element with a class btn which is currently hovered by the user.

I would prefer :disabled over [disabled], see this question for a discussion: Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

---

By the way, Laravel (PHP) generates the HTML - not the browser.