← All elements
<div class="pg"><input type="radio" name="p" id="p1"><label for="p1">1</label><input type="radio" name="p" id="p2" checked><label for="p2">2</label><input type="radio" name="p" id="p3"><label for="p3">3</label><input type="radio" name="p" id="p4"><label for="p4">4</label><input type="radio" name="p" id="p5"><label for="p5">5</label></div>About this navigation bar
Numbered pagination where each page button is a radio and the active page is highlighted with :checked.
How it works
Each page number is a label for a hidden radio input. The active page is styled with input:checked + label, which changes the background, text colour, lift and shadow. Because radios share one name, selecting a page automatically deselects the previous one without any script.
Ways to customise it
- Add or remove radio and label pairs to change the number of pages.
- Change the active colour #38bdf8 to your accent.
- Adjust label width and height for bigger tap targets.
Good to know
This demonstrates the visual state only. In a real product each number should be a link to a page. The radios still give keyboard arrow navigation and a visible focus ring.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.