Modifying Margin and Spacing for Selections in Radio Buttons

I have successfully implemented the code for a radio button, and everything is working as expected

div > label {
    margin-right: 80px !important;
    box-shadow: .3rem .3rem .6rem #c8d0e7, 
-.2rem -.2rem .5rem #FFFFFF;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
}

div > label::after {
    content: "";
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    background: #9baacf;
    border-radius: 50%;
    transition: 0.3s ease;
}

div > label:has(input:checked)::after{
  background: #6c7ae0;
}
div > label > input{
  display: none;
}

div > label:hover::after{
  background: #6c7ae0;
}

div > label > span {
    color: #9baacf;
    margin-left: 130px !important;
    text-align: center;
}

div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 82px;
    margin-right: 15px;
    margin-top: 25px;
    font-size: 12px;
    font-weight: 700;
}
<div>
    <label>
        <input type="radio" value="all">
        <span>All</span>
    </label>
    <label>
        <input type="radio" value="upcoming">
        <span>Upcoming</span>
    </label>
    <label>
        <input type="radio" value="expired">
        <span>Expired</span>
    </label>
</div>

I am having trouble identifying where there might be an issue, but I noticed some inconsistency in the spacing between the text and the circular buttons for all three options. My goal is to maintain a consistent margin of 10 pixels between the text element and the circular button.

htmlcss

Answer №1

The issue lies not in the CSS code but rather in the structure itself and how CSS interacts with it.

To enhance readability, I added a .radialHolder class to the div. Upon further examination, I discovered that the presence of checked was causing the element to be consistently selected, and a radio button without a name property operates independently.

In summary, here is your code with the inclusion of input:checked + .myRadioButton as specified in the comments. This revised structure will provide you with greater flexibility for future modifications.

.radialHolder > label > .myRadialButton {
    /*margin-right: 80px !important;*/
    box-shadow: .3rem .3rem .6rem #c8d0e7, 
-.2rem -.2rem .5rem #FFFFFF;
    position: relative;
    display: inline-block;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
   vertical-align: middle;
}

.radialHolder > label > .myRadialButton::after {
    content: "";
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    left: 0.4rem; /* parent width/2 - element width/2 */
    top: 0.4rem; /* parent width/2 - element width/2 */
    background: #9baacf;
    border-radius: 50%;
    transform: scale(0.5);
    transition: 0.3s ease;
}

.radialHolder > label > input:checked + .myRadialButton::after{
  background: #6c7ae0;
  transform: scale(1.25);
}
.radialHolder label input{
  display: none;
}

.radialHolder > label:hover > .myRadialButton::after{
  background: #6c7ae0;
}

.radialHolder > label > span {
    color: #9baacf;
    margin-left: 10px;
    text-align: center;
}

.radialHolder {
    width: 100%;
    max-width: 450px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*width: fit-content;*/
    height: 82px;
    margin-right: 15px;
    margin-top: 25px;
    font-size: 12px;
    font-weight: 700;
}
<div class="radialHolder">
    <label>
        <input type="radio" value="all" name="mychoices">
        <div class="myRadialButton"></div>
        <span>All</span>
    </label>
    <label>
        <input type="radio" value="upcoming" name="mychoices">
        <div class="myRadialButton"></div>
        <span>Upcoming</span>
    </label>
    <label>
        <input type="radio" value="expired" name="mychoices">
        <div class="myRadialButton"></div>
        <span>Expired</span>
    </label>
</div>

UPDATE: In response to feedback, here's an alternative solution using only input+span. While this addresses a specific issue, I've kept the original preferred method intact and provided this codepen link as a solution

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML comments generated from Freemarker's list notation

Currently, I have integrated Apache Freemarker into an HTML editor where users can create templates using code. For example, a user may write the following code for a list: <#list items as item>...</#list> While this is the correct way to gen ...

javascripthtmlapacheencodingfreemarker

Tips for personalizing the Material-UI sticky header to work with horizontal scrolling

Check out this example of a Material UI table with a sticky header on CodeSandox: https://codesandbox.io/s/yi98d?file=/demo.tsx I encountered an issue where the left side header cells slide behind each other when I added a stickyHeader prop to the Materia ...

cssreactjsmaterial-ui

Bring to the front the div altered by a CSS3 animation

Recently, I encountered an issue with a div card that triggers an animation when clicked. The animation involves the card scaling up larger, but the problem arises as its edges get hidden under other cards. To visualize this, take a look at the screenshot ...

javascriptjqueryhtmlcss

Keep the nested ul with absolute positioning open until the pointer is moved outside the element

I am working on a navigation menu where the last list item (li) contains a nested ul for a dropdown menu. My goal is to display this nested menu when hovering over the parent li and hide it when moving away from the menu. However, I am running into an issu ...

jquerycss

Learn the process of creating various themes with Tailwind CSS

When exploring Tailwind CSS, it appears that specific colors need to be specified in classes like this: <div class="bg-yellow-200 dark:bg-gray-800"></div> However, I am interested in offering 10 different themes for users to choose f ...

htmlcsstailwind-css

Responsive tables in Bootstrap 4 that are nested

I am currently utilizing Bootstrap 4. I have a complex table structure where I want only the second column and onward to be scrollable. The challenge is making this specific part of the table responsive while keeping the rest static. I attempted to nest a ...

htmlcssbootstrap-4

Problems with CSS animations on mobile devices in WordPress

On my website powered by Elementor Pro, I have implemented custom CSS to animate the Shape Divider with a "Brush Wave" style. Below is the code snippet: .elementor-shape-bottom .elementor-shape-top .elementor-shape body { overflow-x:hidden; } @keyframes ...

htmlcsswordpresscss-animationselementor

Determining the condition of the menu: understanding whether it is open or closed

I'm diving into the world of jQuery and JavaScript, trying to grasp the ins and outs of the mmenu API. Despite my efforts to understand the libraries, the JavaScript code remains a mystery to me. Following the tutorial provided on , I successfully cr ...

javascriptjqueryhtmlcssmmenu

Create a draggable and droppable file upload container that functions similarly to an input with the type "file"

My goal is to create a native HTML5 multiple file upload feature using drag and drop functionality. Despite following tutorials like and http://www.html5rocks.com/en/tutorials/file/dndfiles/, I have not yet found the exact solution I am looking for. Ess ...

jqueryajaxhtmldrag-and-drop

Adding numbers in JSP

Is there a way to trigger a popup alert message when the user inputs a correct or incorrect value and clicks on the "Go" button? I'm unsure of how to link the "Go" button with the Java code. Please assist me. <%@ page import="java.io.*,java.util. ...

javahtmljsp

The problem of Twitter Bootstrap 2 top navigation dropdown not functioning properly on mobile devices

I’ve spent a significant amount of time researching the issue prior to reaching out here, but unfortunately I haven’t been able to find a solution yet. Website Link: Currently, I am using Twitter Bootstrap 2.3.2 and have integrated a form in the drop ...

htmltwitter-bootstrapmobilemenutwitter-bootstrap-2

Is it possible to accomplish this using a list or a table in HTML/CSS?

I am currently working on creating a visual representation of a color catalog using hyperlinked images. My goal is to have a layout that displays the colors in a grid format, similar to this: However, the number of images per row may vary depending on the ...

phphtmlmysqlcss

What is the best way to have a div created by JavaScript automatically expand to cover the entire screen after clicking on a dynamically generated table cell?

A unique interactive game inspired by Jeopardy is in the works. By clicking on a specific element within the game board, players can reveal questions fetched from the Jeopardy API. These questions are then presented elegantly within a dynamically created d ...

javascripthtmlcss

Unable to save the user's identification in the session

I am in the process of retrieving the user ID of a logged-in user and storing it in the session. This way, when a user submits something, I can include their user ID in the submission to the database. My login page is quite rudimentary, so any guidance wou ...

phphtmlmysqlsession-variables

What is the best method for implementing numeric input in Vue.js?

I have experience developing web apps using Nuxt.js. I am currently trying to implement validation that excludes negative values and decimal points in all input tags (around 20-30) within the same Vue component. My approach involves injecting validation ru ...

javascripthtmlvue.jsnuxt.js

Not every situation calls for the same type of styling

I am struggling to override the CSS for <h1> and <h2> using specific selectors only. The changes are only being applied to one class, with <h1> changing color to green but not <h2>. Can someone please assist me in identifying where ...

css

Unable to adjust font weight as intended

I'm encountering an issue with getting the lighter font weights to display correctly. Despite having all the necessary font weights installed on my computer, it seems that many fonts do not support the lighter options. What could be causing this incon ...

htmlcssfonts

Having issues with the Vue.js documentation example not functioning properly in Codepen?

My goal is to replicate a checkbox example from Vue.js's documentation. However, when I import Vue into codepen.io and copy the code for multiple checkboxes into the JS field, then paste the HTML into the designated field, something isn't working ...

htmlvue.jscodepen

Clearing Time Field Input in Safari

Recently, I've been utilizing the following HTML input element: <input type="time"> While testing it in both Chrome and Safari, I noticed that the clear field (cross button) is absent when using Safari. How can I make the cross button appear i ...

javascripthtmlsafari

Choose the option to retrieve information from the database

Within my database, there is a table named "train_information" which contains the following fields: train_id country_id user_id train_name tare_weight number_of_bogies number_of_axles wheel_diameter_min wheel_diameter_max In addition, I have developed t ...

phphtmlmysqlsql