CSS selector input test grid

November 28, 2020

inopinatus

There are many opportunities to respond to interactive page state in pure CSS. Many (not all) rely on selectors against input types. I put this table together whilst building up a CSS-centric page automation toolkit, for examining opportunities for stateful behaviours and transitions in web pages using little or no Javascript.

Selectors tested: :active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :invalid :optional :out-of-range :placeholder-show :read-only :read-write :required :target :valid :link :visited :any-link [open] :not([open])

Type state	Element Selectors
reset	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
submit	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
button	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
checkbox	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
checkbox, required	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
checkbox, checked	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
color	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
date	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
datetime	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
email	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
file	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
hidden	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
image	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
month	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
number	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
number (with min/max)	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
password	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
range	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
search	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
tel	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
time	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
url	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
week	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
Text input variants
plain	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
required	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
with pattern	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
with datalist	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
disabled	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
display:none	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
visibility:hidden	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
opacity:0	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
sr-only	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
Radio input variants
unnamed	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
unnamed, required	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
unnamed, checked	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
name: radio0	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
name: radio0	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
name: radio1, checked	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
name: radio1	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
name: radio2, required	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
name: radio2	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link

Other elements	Element Selectors
<select required>	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
<button>	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
<textarea>	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
<summary><details> (accesskey="x")	summary details :active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link [open] :not([open])
<form> with required radio	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
<form> with sr-only required radio	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
<form> with external sr-only required radio	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
<form> with external required selected checkbox	:active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
<dialog> (accesskey="i")	Enter an ice-cream flavor: :active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link [open] :not([open])
<span tabindex="0">	span :active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link
target, #anchor1	Trigger :active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link [open] :not([open])
target, #anchor2	Trigger :active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link [open] :not([open])
target, random anchor	Trigger :active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link [open] :not([open])
Link, visited	https://inopinatus.org :active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link [open] :not([open])
Link, not visited	http://www.random.none :active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link [open] :not([open])
focus-within dropdown	Sweets Donuts Cupcakes Chocolate Bonbons :active :checked :default :disabled :enabled :focus :focus-within :hover :in-range :indeterminate :valid :invalid :optional :out-of-range :placeholder-shown :read-only :read-write :required :target :link :visited :any-link [open] :not([open])