1 year ago

https://sebastiandedeyne.com/a-css-selector-to-highlight-clickable-elements/ https://sebastiandedeyne.com/tags/css/I was building wireframes for a website with HTML & CSS. When a visitor reviewing the prototype tries to click something that isn’t hooked up, I wanted to clarify what they could interact with.

In the past, I’ve used JavaScript to add an outline to clickable elements when someting non-interactive was clicked.

html:active:not(:has(a:active, button:active, label:active)) :is(a, button, label) { outline: 2px solid blue; } How it works: html:active will match whenever you hold down your mouse on the page :not(:has(a:active, button:active, label:active)) will not match when you’re holding down your mouse on an a, button, or label element, to avoid the outline from appearing when the user clicks something that is functional :is(a, button, label) matches all a, button, and label elements on the page