center the radio button with CSS3

I am experiencing difficulty focusing the pointer inside this customized radio button.

<div class="radio">
    <input id="left" type="radio" name="gender" value="left">
    <label for="left">Left</label>
    <input id="right" type="radio" name="gender" value="right">
    <label for="right">Right</label>
</div>

label {

    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
}

input[type=radio] {

    display: none;
}

label:before {

    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #ffffff;
    border: 3px solid;
    border-color: #bababa;
}

.radio label:before {

    border-radius: 8px;
}
input[type=radio]:checked + label:before {

    content: "\2022";
    color: #373c3e;
    font-size: 60px;
    text-align: center;
    line-height: 16px;
}

Below is an example to demonstrate the issue.

Check out https://jsfiddle.net/drag/rbhzpvn3/1/

Answer №1

Instead of setting content as "\2022", you can simply change the background color.

This translates to:

input[type=radio]:checked + label:before {

background-color: #373c3e;

}

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

Floating elements are misaligned and not laying out correctly

I've encountered an issue where the footer div is appearing behind the right-hand side div. I have a central container div with two floated divs next to each other, and the footer is separate. I've spent hours trying to fix it but can't figu ...

The HTML elements may have identical heights, but visually, one appears larger than the other

The size of the "login to enter chat" button seems to be larger than the messageBox div, despite adjusting padding and margins. What could be causing this issue? Any suggestions on how to fix this design glitch? #chatbox { width: 500px; height: ...

What is the best way to format a pseudo-element to serve as the header for a paragraph?

We are utilizing Markdown (Kramdown) for generating a static website. When incorporating infoboxes, we can enhance paragraphs and achieve the following outcomes: {:.note .icon-check title="This is a title"} Lorem, ipsum dolor sit amet consectetur adipisici ...

How to Achieve a Fixed Bottom Footer in Ember Framework

Hello, I am working on an Ember application and trying to implement a Sticky Footer feature. I followed a tutorial on Sticky Footer On CSS-Tricks which worked for me previously, but it seems to not work with Ember. Here is my CSS code: .mainFooter { ...

Finding the nearest span element with a selector in styled components

Currently experimenting with integrating Styled Components to target the nearest span element. <label> <span className="">Password</span> <input type="password" id="passwordInput" /> </label> ...

blurring out of an input field and a division element

I am currently working on creating a dropdown suggestion box that hides when the input field and dropdown box are no longer in focus. My HTML code: <input type="text" id="user_address"> <div id="user_address_sg">SUGGESTION</div> <di ...

Is there a way to implement the adjacent selector in combination with the :before selector?

Hello there, I am working on a timeline area with a slick effect and have implemented slick.js for that purpose. I am trying to change the color of my spans within the elements. Specifically, I changed the first span in the slick-active class element succe ...

Changing the position of an image can vary across different devices when using HTML5 Canvas

I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I ...

Add a class by utilizing the :class attribute

I reviewed the documentation, but I am still struggling to implement this in my project. Initially, I simply want to display a specific class using vue.js that I can later modify dynamically. I just need to establish the default behavior of that class, so ...

What is causing my circles to not align properly in the center?

My website features circles that display various percentages. Each circle contains text indicating the percentage amount, as well as a short description underneath. While I have successfully centered all the text elements, I am facing difficulty centering ...

Adjust Navbar Header Color Based on Screen Size

I am completely new to front-end development. I am in the process of building my own responsive website using Bootstrap 3. One issue I am facing is that when I resize my browser window to simulate a phone screen, I want the navigation bar color to change ...

Slow rotation in CSS styling

.badge { -webkit-transform-style: preserve-3d; -webkit-perspective: 1000; position: relative; } .back, .front { position: absolute; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 1s ease-in; width: ...

Flame-inspired CSS editor

My current CSS editing workflow goes something like this: I ask for feedback on a page Suggestions are given to make post titles bigger I use Firebug to inspect the post title element I locate the corresponding CSS statement in Firebug (like h2.post_title ...

A guide to creating a personalized horizontal dashed separator in Material UI

I'm looking to customize a divider template by turning it into a horizontal dashed divider, but I'm struggling to override it. Even when attempting an sx edit with a borderRadius, the divider doesn't change as expected. source code: import ...

What is the best way to wrap text and move the lines up without affecting the bottom margin?

When the text length increases in the first image, it shifts upwards similar to what you see in this image. How can I achieve this effect? The use of "word-wrap" causes the line to break and move to the next line, which is not what I want. In the code sn ...

Changing the designated materialUI class

Within the project, I am utilizing this theme: export const theme = createMuiTheme({ ...defaultThemeConfig, overrides: { ...defaultThemeConfig.overrides, MuiListItem: { root: { '&:nth-child(odd)': { backgro ...

Comparing inline-block and block display options for displaying images

In this HTML snippet, there is a main div with the id of "main_div" that contains two sub-divs. The first sub-div has an id of "logo" and includes a link to a picture. The second sub-div has an id of "intro" and contains text. For reference, here is the o ...

The show/hide jquery function is functioning perfectly on desktop devices, but issues arise on mobile devices where the divs overlap each other when using the show() method

I need a way to toggle input text boxes based on selection using a select box This is the HTML code snippet: <div class="row"> <div class="form-group"> <div class="col-sm-1 label2"> <label class="control-label ...

JavaScript popup cannot be shown at this time

I'm encountering an issue with displaying popups using JavaScript. Currently, only the div with class "popup" is being shown. When a user takes action, both popup and popup2 should be displayed but for some reason, it's not working as expected. ...

Tips for getting flex-end to function properly in IE11

My attempt to implement justify-content: flex-end; for a DIV with hidden overflow content in IE11 was unsuccessful. Despite trying various approaches, I managed to create a basic code snippet that functions properly in Chrome but fails in IE11: .token- ...