> All in One 586: Detecting Specific Text Input with HTML and CSS

Ads

Tuesday, November 9, 2021

Detecting Specific Text Input with HTML and CSS

Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:

  1. You have to press a special combination of keys on a keyboard.
  2. Then type a secret password.

From there, a special message pops up on the screen. Easily JavaScript territory, but no, this is done here entirely in HTML and CSS, which is wild.

A lot of little known features and tricks is combined here to pull this off, like HTML’s accesskey and pattern attributes, as well as :not(), :placeholder-shown, and :valid in CSS—not to mention the custom property toggle trick.

That’s… wow. And yet, look how very little code it is.

To Shared LinkPermalink on CSS-Tricks


The post Detecting Specific Text Input with HTML and CSS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.



from CSS-Tricks https://ift.tt/301TZLX
via IFTTT

No comments:

Post a Comment

A Few Ways That Cloudways Makes Running This Site a Little Easier

(This is a sponsored post .) It’s probably no surprise to you that CSS-Tricks is (proudly) hosted on Cloudways , DigitalOcean’s managed hos...