Create a sleek design by aligning labels with CSS 3 fancy radio buttons

I have a radio button with a larger circle that needs to be 38px

input[type=radio] {
  visibility: hidden;
}

.label {
  font-weight: normal;
  color: #333;
}

.label::before {
  content: '';
  position: absolute;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #727272;
  border-radius: 50%;
}

input[type=radio]:checked+label:after {
  content: '';
  position: absolute;
  width: 38px;
  height: 38px;
  left: 0;
  background: #0065bd;
  border: none;
  transform: scale(0.5);
  border-radius: 50%;
}
<div class="container">
  <input type="radio" id="radio1" value="on">
  <label for="radio1" class="label">Yes</label>
</div>

If you want to see the code in action, here is the fiddle. Can anyone help me align the label so it is centered and pushed to the right of the circle?

htmlcss

Answer №1

To center the content, apply .container{ line-height:38px} (even though it already appears to be aligned to the right)

https://jsfiddle.net/8gubpzhq/

If you want to move it further to the right, use the following code:

  .label {
  font-weight: normal;
  color: #333;
  padding-left:5px;//add this line
}

https://jsfiddle.net/vszuu535/

Answer №2

To vertically center your .label, you can apply line-height:40px;. For additional rightward movement, consider adding padding-left:20px; (Adjust the values of line-height and padding-left as needed).

input[type=radio] {
  visibility: hidden;
}

.label {
  font-weight: normal;
  color: #333;
  line-height:40px;
  padding-left:20px;
}

.label::before {
  content: '';
  position: absolute;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #727272;
  border-radius: 50%;
}

input[type=radio]:checked + label:after {
  content: '';
  position: absolute;
  width: 38px;
  height: 38px;
  left: 0;
  background: #0065bd;
  border: none;
  transform: scale(0.5);
  border-radius: 50%;
}
<div class="container">
  <input type="radio" id="radio1" value="on">
  <label for="radio1" class="label">Yes</label>
</div>

Answer №3

It's possible that your code is making things more complex than necessary; if you want the input to appear larger, consider adjusting the sizing and styling of the input itself rather than focusing on the label.

Check out this snippet (the radio button now turns blue after editing, inspired by this codepen. It starts off grey, then turns blue when clicked, centered, and slightly indented).

Quick tip: If you're using a default value (especially with just one option), maybe a customized checkbox would be a better fit? Radio buttons are typically used for situations where the user needs to choose from two or more options, but can only select one... something to consider.

input[type="radio"] {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid #727272;
}

input[type="radio"]+label span {
  display: inline-block;
  width: 38px;
  height: 38px;
  margin: 9px;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  background-color: grey;
}

input[type="radio"]:checked+label span {
  content="";
  background: #0065bd;
}

input[type="radio"]+label span,
input[type="radio"]:checked+label span {
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}
<div class="container">
  <input type="radio" id="radio1" name="radio">
  <label for="radio1" class="label"><span></span>Yes</label>

  <input type="radio" id="radio2" name="radio">
  <label for="radio2" class="label"><span></span>No</label>
</div>

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

The pseudo-class for invalid input triggers CSS invalidation, even when the input field is left blank

The input property for handling invalid input is currently malfunctioning. It triggers an error even when the input field is left empty. I would like the input border to be goldenrod when it's empty, turn red if the input doesn't match the specif ...

htmlcssreactjs

Using a combination of AND and OR in XPATH

Recently, I encountered the following HTML code: <div><h6>abc/h6><p>date</p></div> Using Selenium, I managed to locate this element based on text. However, the issue arises when <h6> can contain various words like "d ...

htmlseleniumselenium-webdriverxpathselenium-chromedriver

What strategies can I implement to improve the efficiency of calling the PHP exec() function for pinging over 100 different hosts?

I have been experimenting with collages in an attempt to find a solution to the slow rendering issue I am facing with the results from my PHP function. The problem arises when I call the function multiple times for different hosts, causing significant dela ...

phphtml

Importing usernames and passwords from a .txt file with Javascript

I'm in the process of creating a website that includes a login feature. The usernames and passwords are currently stored within the website files as .txt documents. I am aware that this method is not secure, but for the purpose of this project, I want ...

javascripthtmlcssauthenticationweb

The PHP login form must be submitted twice

I've encountered an issue that's stumping me. All of my other forms are functioning correctly, except for the Login Form, which needs to be filled out twice before it works. First, I input my username and password, submit the form, and the page ...

phphtmlmysql

Does anyone have insight on which JavaScript library is being utilized in this context?

While perusing an interesting article, I came across an image that caught my attention. Clicking on it revealed a unique way to view the full size. I am curious if anyone knows which JavaScript library was used for this effect. You can find the article her ...

javascripthtmlimage

The combination of Bootstrap and Django does not support responsive design

My code is not working correctly, and I'm struggling to identify the errors. The website I'm working on has subpages, but the responsive design doesn't seem to be functioning properly. Could this issue be related to mistakes in my HTML/CSS c ...

htmlcssdjangobootstrap-4responsive-design

What are some tips for getting media queries to function properly?

I need help with my homepage banner image as I am trying to make it responsive by adding media queries. The goal is for the image to adapt to 3 different sizes based on the screen being used, but currently only the medium-sized version appears. Could someo ...

css

Error Encountered in Laravel 5.2 FormBuilder.php

Encountering Laravel 5.2 ErrorException in FormBuilder.php on line 1235 stating that the method 'style' does not exist. This error has me perplexed. I have already made updates to my composer.json file by adding "laravelcollective/html": "^5.2" ...

phpcsslaravel-5

Maintain the background div while scrolling horizontally

I am facing an issue with my wide bar chart where I use iScroll to enable horizontal scrolling. Behind the bar chart, there are horizontal lines that should move along in the background as the user scrolls horizontally. The challenge is to keep the lines v ...

htmlcss

Designing a dynamic button that expands on hover to catch the eye

My instructor has provided us with this code snippet: <a class="btn btn-tertiary" href="#"> <span class="circle"> <i class="arrow-right"> </i> </span>Create profile </a> .btn.bt ...

htmlcss

Tips for embedding HTML content onto a clipboard for easy pasting into Gmail

Our application generates two URLs that users often want to copy and paste into Gmail. To make these links more visually appealing than the lengthy URLs, we implemented HTML code. We included a feature that places the HTML on the Windows clipboard for easy ...

htmlgmail

Develop and arrange badge components using Material UI

I'm new to material ui and I want to design colored rounded squares with a letter inside placed on a card component, similar to the image below. https://i.stack.imgur.com/fmdi4.png As shown in the example, the colored square with "A" acts as a badge ...

javascriptcssreactjsmaterial-ui

Guide to ensuring a jQuery modal box appears above other page elements

As I work on a jQuery popup modal box, I am faced with the issue of it pushing all other content aside when called. The toggleSlide() function is being used and works fine, but the layout problem remains. Attempts to rectify this by using position: relati ...

jquerypopupmodal-dialogcss

Is there a way to potentially utilize window.open() to open a specific section of a webpage?

My HTML page consists of 2 div blocks and 2 links. I want to open the content of the first div in a new window when the first link is clicked, and the content of the second div in another new window when the second link is clicked. You can find the code h ...

javascriptjqueryhtmlcss

Creating a selection area with CSS that appears transparent is a straightforward process

I'm currently exploring ways to implement a UI effect on a webpage that involves highlighting a specific area while covering the rest of the page with a semi-transparent black overlay, all using CSS only. What is the most common approach to achieving ...

javascripthtmlcss

Tips for displaying website preloader just once

I recently added a preloader to my website, but I'm having trouble getting it to only play once per visit. Ideally, I want the animation to show up when the site is opened in a new tab or browser window, but not when navigating through the domain by c ...

javascriptjqueryhtmlcss

The external javascript file is unable to recognize the HTML table rows that are dynamically inserted through an AJAX request

I have a situation where I'm pulling data from an SQL database and integrating it into my existing HTML table row. Here's the code snippet: Using Ajax to fetch data upon clicking analyze_submit: $(document).ready(function(e) { $('#anal ...

javascriptjqueryhtmlajax

Assertion error: 1 does not match the expected value of 6

I am faced with a challenging test that requires me to write code that will pass successfully. However, no matter what I try, all I get is the following error messages: "Failed asserting that 1 matches expected 6" when I return 6 and "Too few arguments t ...

phphtmlobjecttesting

In the event that conflicting media queries take precedence over one another

I developed a set of queries for a particular element on a landing page. Here is the HTML structure: <div class="hsContent"> <article> This is my amazing content. Wow! </article> </div> This is how the initial styling looks fo ...

htmlcssmedia-queries