CSS rules for multiple attributes

Question

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?

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
– Jukka K. Korpela, Commented Aug 4, 2014 at 17:12

Community · Accepted Answer · 2017-05-23 12:27:20Z

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.)

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Aug 4, 2014 at 17:01

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cjmarkham · Accepted Answer · 2014-08-04 17:02:50Z

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.

answered Aug 4, 2014 at 17:02

Cjmarkham

9,7336 gold badges52 silver badges85 bronze badges

Collectives™ on Stack Overflow

CSS rules for multiple attributes

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related