CssHow-ToBeginner · 3 min read

How to Create Tabs in CSS: Simple Tab Navigation Tutorial

To create tabs in CSS, use a combination of input[type='radio'] or checkbox elements with labels styled as tabs, and use the :checked pseudo-class to show or hide content sections. This method allows switching between tab content purely with CSS by toggling visibility based on which tab is selected.

📐

Syntax

Tabs in CSS typically use hidden input elements of type radio to control which tab is active. Each tab label is linked to an input using the for attribute. The :checked pseudo-class on the input controls which content is visible.

input[type='radio']: hidden controls for tab selection
label: clickable tab buttons
:checked: CSS selector to style active tab and show content
div or section: containers for tab content

html+css

<!-- Basic structure -->
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">Tab 2</label>

<div class="tab-content" id="content1">Content for Tab 1</div>
<div class="tab-content" id="content2">Content for Tab 2</div>

/* CSS */
input[type='radio'] { display: none; }
label { cursor: pointer; padding: 0.5rem 1rem; border: 1px solid #ccc; }
input#tab1:checked + label[for='tab1'] { background: #ddd; }
input#tab1:checked ~ #content1 { display: block; }
.tab-content { display: none; padding: 1rem; border: 1px solid #ccc; }

💻

Example

This example shows a simple tab interface with two tabs. Clicking a tab label changes the visible content below. The tabs highlight the active selection using CSS only.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tabs Example</title>
<style>
  body { font-family: Arial, sans-serif; padding: 2rem; }
  input[type='radio'] { display: none; }
  label {
    cursor: pointer;
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #f9f9f9;
    margin-right: -1px;
    position: relative;
    top: 1px;
  }
  label:hover {
    background: #e0e0e0;
  }
  input[type='radio']:checked + label {
    background: white;
    border-bottom: 1px solid white;
    font-weight: bold;
  }
  .tab-content {
    border: 1px solid #ccc;
    padding: 1rem;
    background: white;
    display: none;
  }
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }
</style>
</head>
<body>
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">Tab 1</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">Tab 2</label>

  <div class="tab-content" id="content1">
    <p>This is the content for Tab 1. It is visible when Tab 1 is selected.</p>
  </div>
  <div class="tab-content" id="content2">
    <p>This is the content for Tab 2. It shows when Tab 2 is selected.</p>
  </div>
</body>
</html>

Output

Two horizontal tabs labeled 'Tab 1' and 'Tab 2' appear at the top. Tab 1 is selected by default with a white background and bold text. Below the tabs, a white box shows the content for Tab 1. Clicking Tab 2 highlights it and shows Tab 2 content instead.

⚠️

Common Pitfalls

Common mistakes when creating CSS tabs include:

Not hiding the radio inputs, which shows ugly default controls.
Forgetting to use the same name attribute on radio inputs, which breaks exclusive selection.
Incorrectly ordering HTML elements so the CSS sibling selectors don't work.
Not styling the active tab label, making it unclear which tab is selected.

html

<!-- Wrong: missing same name attribute -->
<input type="radio" id="tab1">
<label for="tab1">Tab 1</label>
<input type="radio" id="tab2">
<label for="tab2">Tab 2</label>

<!-- Right: same name attribute for grouping -->
<input type="radio" id="tab1" name="tabs">
<label for="tab1">Tab 1</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">Tab 2</label>

📊

Quick Reference

Use input[type='radio'] with the same name for tab control.
Hide inputs with display: none;.
Use label elements linked by for attribute as clickable tabs.
Use :checked selector to style active tab and show content.
Place tab content elements as siblings after inputs and labels for CSS sibling selectors to work.

✅

Key Takeaways

Use hidden radio inputs and labels to create clickable tabs controlled by CSS only.

The :checked pseudo-class lets you style the active tab and show its content.

All radio inputs must share the same name attribute for exclusive selection.

Place inputs, labels, and content in the correct order for CSS sibling selectors to work.

Style active tabs clearly to improve user experience and accessibility.