This CSS code defines the styling for a group of...

August 25, 2025 at 04:55 PM

<style>
.fancy-radio .gchoice {
    z-index:1;
    position:relative;
    margin:0 0 10px 0;
    padding:0;
    height:70px !important;
    width: 100%!important;
}
.fancy-radio input.gfield-choice-input {
    z-index:2;
    appearance:none;
    margin:0;
    padding:0;
    width: 100%;
    border-radius: 5px;
    height:100%;
	min-height: 70px;
    background: white;
    transition: .3s all ease-in-out;
    position:absolute;
    background:#dfe1e5;
    position:absolute;
}
.fancy-radio input.gfield-choice-input:hover,
.gchoice label:hover {
    cursor:pointer;
}
.fancy-radio input.gfield-choice-input:checked {
    background: #CE0F2D;
}
.fancy-radio input.gfield-choice-input:checked + label {
    color:white;
}
.fancy-radio .gchoice label {
    z-index:3;
    font-weight:700;
    color:#141c25;
    display:block;
    position: absolute;
    padding: 0 0 0 30px;
    top: 50%;
    transform: translateY(-50%);
    width:100%;
    overflow:visible;
}
.fancy-radio input.gfield-choice-input + label:after {
    content: "";
    position: absolute;
    right: -10px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 2px solid #c5c9d2;
    z-index: 2;
    top: 50%;
    transition: .3s all ease-in-out;
    color: white;
    font-size: 25px;
    text-align: center;
    line-height: 25px;
    font-weight: 500;
}
.fancy-radio input[type="checkbox"].gfield-choice-input + label:after { 
    border-radius: 5px;
}
.fancy-radio input[type="radio"].gfield-choice-input + label:after {
    border-radius:50px;
}
.fancy-radio input.gfield-choice-input:checked + label:after {
    content: "\2713";
    border: 2px solid white;
}
</style>

This CSS code defines the styling for a group of custom-styled radio buttons (and potentially checkboxes) within a container. Here's what the code does:

General Overview

Custom Styling: The provided styling creates visually enhanced versions of standard radio buttons (and optionally checkboxes), which use custom layout, colors, and hover/checked effects.
Responsive Design: The code ensures that the radio buttons adapt to their layout with relative positioning, widths, and heights.

Key Features:

Container Styles (.fancy-radio .gchoice):
- Styles elements (gchoice) inside a fancy-radio container.
- Provides layout properties such as consistent height (70px), width (100%), and margin between items.
- Ensures elements stack properly relative to one another using position: relative and z-index.
Input Element (input.gfield-choice-input):
- The <input> elements (radio buttons/checkboxes) are styled to appear completely custom.
- By setting appearance: none, the browser's default appearance for radio buttons is removed.
- Custom dimensions (width: 100% and height: 100%) and colors (e.g., background: #dfe1e5) are defined.
- Transitions (transition: .3s all ease-in-out) ensure smooth visual changes for interactions like hover or checked states.
- The position: absolute ensures the input is properly positioned within its container.
Hover State (:hover):
- Input buttons and associated labels change the cursor to a pointer, signaling interactivity.
Checked State (:checked):
- When a radio button (or checkbox) is selected, its background changes to #CE0F2D (a red color).
- The linked <label>'s text color changes to white (color: white).
- For the visual indicator (label:after), a checkmark ("\2713") appears to indicate the selected state, with a change in border style.
Label Element (.fancy-radio .gchoice label):
- The labels for each choice display as structured text aligned vertically and horizontally relative to each radio button.
- Styled to be visually distinct with font-weight (700), padding, and a positioning style (transform: translateY(-50%)) for proper centering.
Indicator (input[type="radio"].gfield-choice-input + label:after):
- A custom circular or rectangular indicator is added at the right-hand side of the label (label:after) using pseudo-elements. Depending on radio or checkbox, the border styling changes:
  - radio: border-radius:50px (circle).
  - checkbox: border-radius:5px (rounded square).
- On selection, the border becomes white, and the checkmark symbol (✔, Unicode "\2713") is shown.
Transitions:
- Most states (hover, checked) use smooth transitions (.3s all ease-in-out) to enhance user experience.

Purpose:

This code is a part of a form or interface and is designed to provide enhanced styling for radio buttons or checkboxes. It replaces the default plain browser-rendered inputs with a modern, visually customizable design.

Use Case: Ideal for scenarios requiring visually appealing and interactive forms, such as surveys, quizzes, or preference selection interfaces.
Allows a straightforward user experience:
- Click to select.
- Hover states to show interactivity.
- Visual indicators for selected choices.

Generate your own explanations

Download our vscode extension

Read other generated explanations

Built by @thebuilderjr