Build a Custom Course Selector with HTML and CSS
In today’s digital-first era, offering users a visually intuitive and friendly interface is not just a luxury it’s a necessity. Whether you're building a course enrolment system or a simple landing page feature, having a custom-styled course selector is a great way to make your user experience memorable.
In this guide, we’ll walk you through how to create a modern custom course selector UI using only HTML and CSS no JavaScript involved. We’ll explore the importance of user-centric form design, accessibility tips, and provide SEO optimization strategies so your component can also rank on search engines.
Why Use a Custom Course Selector?
Let’s face it standard radio buttons and forms can be bland. A course selector like the one we’re building today:
- Enhances user experience.
- Improves visual hierarchy.
- Helps with accessibility and responsiveness.
- Looks great on both desktop and mobile.
Tool Structure Overview
The tool is composed of three main course options:
- UI/UX Design – 90$/year
- Data Science – 180$/year
- Cyber Security – 200$/year
Each option is implemented using a hidden radio input and a styled label that functions as a clickable box. The labels change background and border colors when selected, making the interaction clear and visually appealing.
Features
- Pure HTML and CSS
- No frameworks required
- Fully responsive
- Visual radio selection
- SEO and accessibility friendly
Design Choices
The design uses a soft, gradient background with a card layout for the form container. Inside, we use Poppins font (Google Fonts) for modern typography and subtle shadows for depth.
Highlight Features:
- Radio buttons hidden using
display: none. - Labels styled as selection boxes.
- Custom radio indicators via
::before simulation. - Smooth transitions on hover and selection.
HTML Structure
Here's the entire HTML structure you can copy into your project:
HTML Code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Custom Course Selector</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">Choose Your Course</div>
<div class="options">
<input type="radio" name="course" id="opt1">
<input type="radio" name="course" id="opt2">
<input type="radio" name="course" id="opt3">
<label for="opt1" class="option label1">
<div class="info">
<span class="indicator"></span>
<span class="course-name">UI/UX Design</span>
</div>
<span class="course-price">90$/year</span>
</label>
<label for="opt2" class="option label2">
<div class="info">
<span class="indicator"></span>
<span class="course-name">Data Science</span>
</div>
<span class="course-price">180$/year</span>
</label>
<label for="opt3" class="option label3">
<div class="info">
<span class="indicator"></span>
<span class="course-name">Cyber Security</span>
</div>
<span class="course-price">200$/year</span>
</label>
</div>
</div>
</body>
</html>
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #68Eacc 0%, #497BE8 100%);
}
.container {
max-width: 350px;
width: 100%;
background: #fff;
border-radius: 5px;
padding: 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .header {
font-size: 22px;
font-weight: 500;
}
.container .options {
margin-top: 20px;
}
.container label.option {
background: #ddd;
margin-top: 12px;
padding: 10px 12px;
display: flex;
border-radius: 5px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.25s ease;
}
.container label.option:hover {
background: #d5bbf7;
}
.container label.option .indicator {
height: 22px;
width: 22px;
background: #ccc;
border: 5px solid transparent;
display: inline-block;
margin-right: 15px;
border-radius: 50%;
box-shadow: inset -4px -4px 10px rgba(0, 0, 0, 0.2);
}
.container input[type="radio"] {
display: none;
}
#opt1:checked ~ label.label1,
#opt2:checked ~ label.label2,
#opt3:checked ~ label.label3 {
border-color: #8E49E8;
background: #d5bbf7;
}
#opt1:checked ~ label.label1 .indicator,
#opt2:checked ~ label.label2 .indicator,
#opt3:checked ~ label.label3 .indicator {
border-color: #8E49E8;
background: #fff;
}
.container label.option .info {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
.course-price {
font-weight: bold;
}
Accessibility Notes
Although we're visually hiding the radio buttons, they're still accessible to screen readers. For full WCAG compliance, consider adding
SEO Optimization Tips
- Add relevant keywords like: course selector UI, HTML CSS form, custom radio buttons, responsive form design.
- Use structured headings for scannability.
- Ensure meta descriptions and titles are unique and focused.
- Provide alt-text if you later add icons or images.
Demo
Please click the button below to view the demo.
Final Thoughts
Creating intuitive UI components doesn't always require JavaScript. With modern CSS capabilities, you can deliver interactive, responsive, and accessible designs quickly.
This course selector is a perfect example of how a little bit of creativity with standard HTML elements and CSS transitions can result in a high-impact user experience. If you’re looking to build a registration form, online learning site, or custom survey this component can easily be extended.
