0

I'm wondering is there any difference between using the :disabled CSS pseudo-class selector and the [disabled] CSS attribute selector (e.g. different browsers support or whatever) to apply styles on a disabled HTML input element or are they totally equivalent?

danicotra
  • 1,333
  • 2
  • 15
  • 34
  • 2
    They are not totally equivalent. An element can get a different state without its attribute actually changing. When that happens, `:disabled` will work and `[disabled]` will not. – GolezTrol Dec 08 '17 at 16:19
  • Refer to this : https://stackoverflow.com/questions/20141450/should-i-use-css-disabled-pseudo-class-or-disabled-attribute-selector-or-is-i –  Dec 08 '17 at 16:23
  • The other way around, a big difference is that :disabled (by default?) only works on input elements where as setting the disabled attribute will work on anything but doesn't have any default effect. In general you should stick to intended behaviours, so using :disabled would be the best practice. – René Dec 08 '17 at 16:25

2 Answers2

0

:disabled is introduced in css3. [disabled] exists from css2.

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

CoursesWeb
  • 4,179
  • 3
  • 21
  • 27
0

The :disabled approach is supported by browsers that support CSS3, while [disabled] is supported by browsers supporting CSS2 onward.

Browser support is very similar for both; the major difference being IE7 backward vs IE9 backward compatibility.

Likewise, the [disabled] approach is supported by native browsers in older mobile OS versions.

For more details, refer to:

Anson W Han
  • 409
  • 2
  • 7