Understand Before You Build

  • HTML
    • Form
    • HTML pattern Attribute
  • CSS
    • inset
    • scroll-snap-type
    • margin-inline
    • Content-visibility
    • Scroll-Driven Animations
    • Isolation
    • @Container
    • @layer
    • :not()
    • :is()
    • :Where()
    • :has()
    • :target
    • backdrop-filter
    • :root
    • Color-scheme
    • Animations
    • Selectors
    • Object-fit
    • Logical Pseudo-Classes
    • :scope
    • Properties
    • Performance
    • Aspect-ratio
    • State Pseudo-Classes
    • Positioning
    • Resize
    • Structural Pseudo-Classes
    • Responsive Design
    • Units
    • Root & Scope Selectors
    • Scrolling
    • At-Rules
    • Target & URL Selectors
    • Spacing
    • Functions
    • Attribute Selectors
    • Layouts
    • Basic Selectors
    • Filters & Effects
    • Colors & Typography
    • Flexbox
    • Combinator Selectors
    • Grid
    • Form & UI State Selectors
    • AI CSS Generator
  • Sass
    • Variables
    • Nesting
    • Mixins
    • Reusable styles
    • Large project management
  • CSS Frameworks
    • Material UI
    • Bootstrap
    • Tailwind CSS
  • React UI
    • Performance Optimization
    • React.memo
    • useMemo
    • useCallback
    • Lazy Loading
    • Code Splitting
    • Virtual DOM Optimization
    • Preventing Re-renders
    • Props & State
    • Hooks
    • Component-based architecture
    • State-driven UI updates
  • Figma
    • Design systems
    • Tokens
    • Variables
    • Auto layout
    • Component variants
    • Design handoff
    • UI consistency

Form & UI State Selectors

Form and UI state selectors are used to style elements based on interaction, accessibility state, or form behavior.

These selectors help create:

  • Interactive forms
  • Better accessibility
  • Modern UI feedback
  • Cleaner user experience
  • Dynamic input styling

Common Form & UI State Selectors

Selector Purpose
:focus-within Parent contains focused element
:focus-visible Keyboard-visible focus state
:checked Checked radio or checkbox
:disabled Disabled form elements
:read-only Read-only form fields

1. :focus-within

Styles a parent element when any child inside it receives focus.


[code theme="dark"] .form-group:focus-within{ border-color:blue; } [/code]

Extremely useful for modern form groups and input containers.


HTML Structure

[code theme="dark"]
[/code]

Live Demo


2. :focus-visible

Applies styles only when focus should be visibly shown, usually during keyboard navigation.


[code theme="dark"] button:focus-visible{ outline:3px solid blue; } [/code]

Improves accessibility and avoids unnecessary focus styles during mouse interaction.


Live Demo


3. :checked

Targets selected checkboxes or radio buttons.


[code theme="dark"] input:checked{ accent-color:blue; } [/code]

Useful for interactive forms and toggle systems.


Live Demo


4. :disabled

Styles disabled form fields and buttons.


[code theme="dark"] input:disabled{ opacity:.5; } [/code]

Disabled fields cannot be interacted with.


Live Demo


5. :read-only

Targets inputs that users can view but cannot edit.


[code theme="dark"] input:read-only{ background:#f3f4f6; } [/code]

Commonly used for profile information or generated data.


HTML Structure

[code theme="dark"] [/code]

Live Demo


Selector Comparison

Selector Trigger
:focus-within Child element focused
:focus-visible Keyboard focus visible
:checked Input selected
:disabled Input disabled
:read-only Input readonly

Advantages of Form & UI State Selectors

  • Improves accessibility
  • Better user interaction feedback
  • Creates modern forms
  • Reduces JavaScript dependency
  • Cleaner UI architecture

Disadvantages

  • Complex states may require careful testing
  • Touch devices may behave differently
  • Overusing visual effects can reduce usability

Cross Browser Compatibility

Modern form and UI state selectors are well supported across all major browsers.

Older browsers may have partial support for:

[code theme="dark"] :focus-visible [/code]