2

I want to set some CSS rules for an input button of type submit, which does not have disabled set to true, and which has the hover selector enabled.

The following syntax doesn't quite work for me:

input[type="submit"]:hover[disabled~="true"]:hover

What's the solution?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Karnivaurus
  • 22,823
  • 57
  • 147
  • 247
  • What do you mean by “not have `disabled` set to `true`"? The valid values of the HTML attribute `disabled` are the string `disabled` (case insensitively) and the empty string. Do you actually refer to setting the `disabled` *property* of the element node to `true` in JavaScript or via an HTML attribute? A different question, with a rather different answer. – Jukka K. Korpela Aug 04 '14 at 17:12

2 Answers2

3

~= does not mean "is not equal to", despite the ~. It means something different entirely (but what it specifically means is outside the scope of this question).

The disabled attribute in HTML is a Boolean attribute, which means it doesn't have a specific value per se (unless you're talking about XHTML, but that's a different matter entirely). You're probably looking for an input that does not have the attribute at all, as opposed to it having a value that is not true. In which case, you would use:

input[type="submit"]:hover:not([disabled])

Better yet, if you can afford the browser compatibility, use the :disabled pseudo-class instead of an attribute selector so you do not have to worry about possible attribute values:

input[type="submit"]:hover:not(:disabled)

(Note that I've also removed the extraneous :hover at the end of your selector which I presume was a mistake.)

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

You could use

input[type="submit"]:enabled:hover {
  background: red;
}

Note that IE<9 does not support the enabled selector.

See this JSFiddle for an example.

Cjmarkham
  • 9,484
  • 5
  • 48
  • 81