What does this CSS snippet do?
This CSS snippet styles a form-like interface with custom-styled radio buttons. Here's how it works:
1. input
- Hidden from view (display: none) — so the default radio button isn't shown.
2. label
- Styled as a block so it's clickable.
- Padded to make space for a custom radio icon on the left.
- Dashed bottom border and semi-transparent text color for inactive state.
3. label::before
- Creates a circular border styled to look like a radio button.
- Positioned absolutely to the left of the label text.
4. label:hover / input:focus + label
- When hovered or focused, makes the label and border fully opaque.
5. label:hover::before
- Darkens the border when hovering over the custom radio circle.
6. input:checked + label
- Highlights the selected label.
- Changes the color to make it appear active.
7. input:checked + label::before
- Replaces the empty circle with a checkmark (
\f00cfrom FontAwesome). - Adds styling to the selected icon to indicate it's chosen.
HTML
<div class="container">
<div class="demo-image"></div>
<div class="row justify-content-between">
<div class="col-md-3 col-radio">
<input type="radio" name="fruit" id="radio-01" value="Apple">
<label for="radio-01">Apple</label>
</div>
<div class="col-md-3 col-radio">
<input type="radio" name="fruit" id="radio-02" value="Banana">
<label for="radio-02">Banana</label>
</div>
<div class="col-md-3 col-radio">
<input type="radio" name="fruit" id="radio-03" value="Grapes">
<label for="radio-03">Grapes</label>
</div>
<div class="col-md-3 col-radio">
<input type="radio" name="fruit" id="radio-04" value="Peach">
<label for="radio-04">Peach</label>
</div>
</div>
</div>
CSS
.demo-container {
margin: 0 auto;
max-width: 640px;
padding: 2em;
background-image: linear-gradient(to top, #ececec 0%, #ffffff 100%);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.demo-image {
width: 100%;
height: 420px;
background-image: url("image.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-size: cover;
margin-bottom: 1em;
}
.col-radio input {
display: none;
}
.col-radio label {
display: block;
position: relative;
padding: 10px 20px 4px 40px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.30);
color: rgba(0, 0, 0, 0.30);
cursor: pointer;
}
.col-radio label::before {
content: '';
display: block;
position: absolute;
top: 10px;
left: 0;
width: 24px;
height: 24px;
border: 2px solid rgba(0, 0, 0, 0.30);
border-radius: 100%;
}
.col-radio label:hover, input:focus + label {
border-bottom: 1px dashed rgb(0, 0, 0, 1.00);
color: rgba(0, 0, 0, 1.00);
}
.col-radio label::before:hover {
border: 2px solid rgba(0, 0, 0, 0.60);
color: rgba(0, 0, 0, 1.00);
}
.col-radio label:hover::before {
border: 2px solid rgba(0, 0, 0, 0.60);
}
.col-radio input:checked + label {
border-bottom: 1px dashed rgb(0, 0, 0, 1.00);
color: rgba(0, 0, 0, 0.90);
}
.col-radio input:checked + label::before {
position: absolute;
padding-top: 2px;
padding-left: 4px;
font-family: 'FontAwesome';
font-size: 12px;
content: '\f00c';
background: rgba(255, 255, 255, 0.80);
border: 2px solid rgba(0, 0, 0, 0.60);
color: rgba(0, 0, 0, 1.00);
font-weight: bold;
Arrow at the bottom
Arrow at the bottom with a utf-8 character
Arrow at the top of a container
Aside
Background color
Blackboard design
Breadcrumbs design
Calendar design
Checkboxes as circular buttons
Checkboxes as toggle switches
Cursor properties
Circular image with a shadow effect
Font Awesome pulled icons
Gallery picture frame with a price ribbon
Google pie chart
Google web fonts
Last child and not last child element
Letter spacing
List items with a Font Awesome icon
Neon text
Neon text with a flickering effect
Notebook paper background
Radio buttons as circular buttons
Radio buttons as rating stars
Remove the glow effect from an input field
Search bar with categories
Track (audio/video subtitles)
Web fonts
Whiteboard design