Syntax - Tasty Web Development Treats

Hasty Treat - Stylin the Unstylables

May 17, 2021
Dive into the quirky world of CSS as the hosts tackle the trickiest styling challenges, affectionately dubbed 'unstylables.' Discover advanced strategies for styling complex HTML elements like selects and inputs. Learn about the shadow DOM and how to boost accessibility with custom components. Pseudo-elements come into play, revealing their quirks and workarounds. The discussion also highlights the interplay between native HTML styling and community-driven standards for a more inclusive web. Get ready for a fun and insightful journey into web design!
Ask episode
AI Snips
Chapters
Transcript
Episode notes
ADVICE

Prioritize Native HTML Elements

  • Prioritize styling default HTML elements first for form design.
  • Only resort to custom JavaScript solutions if absolutely necessary for accessibility and mobile UX.
ADVICE

Basic Input Styling Techniques

  • Use CSS properties like font-size, color, padding, and margin to style basic input elements.
  • For custom checkboxes or radio buttons, use :before and :after pseudo-elements with labels and input:checked.
ADVICE

Advanced Styling with Overlapping Elements

  • Overlap DOM elements and use pointer-events: none for custom styling while preserving accessibility.
  • Wrap elements in divs or spans to use :before and :after on elements that don't support them directly.
Get the Snipd Podcast app to discover more snips from this episode
Get the app