Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week
Source: sebastiandedeyne.com
A CSS selector to highlight clickable elements
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
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
Newsletter
ToastMail
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners
Laravel/PHP Careers