What is the best way to align the Radio on the left using CSS?

Trying to recreate the design of the freeCodeCamp Survey Form

Having trouble with using inline-block after .form-control input, specifically for radio buttons.

Can someone help pinpoint what I'm doing wrong? Thank you!

form{
  background-color: grey;
  max-width: 450px;
  margin: 0 auto;
  padding: 30px
  
}


.form-control{
  margin-bottom: 40px;
  text-align: left;
}

.form-control label{
  display: block;
  margin-bottom: 10px;
  
}

.form-control input, .form-control select{
 
  border: 1px solid #777;
  border-radius: 3px;
  padding: 8px;
  display: block;
  width: 100%;  
  
}

.form-control input [type="radio"]{
  width: auto;
  display:inline-block;
 
  
}
<div class="form-control">
   <label> Would you recommend freeCodeCamp to a friend?</label>
        
      <label for="Definitely"> <input type="radio" id="Definitely" name=RadioRecommend> Definitely </label>
        
      <label for="Maybe"> <input type="radio" id="Maybe" name=RadioRecommend> Maybe </label>
        
      <label for="Not sure "> <input type="radio"  id="Not sure" name=RadioRecommend> Not sure </label>
      
          </div>

htmlcss

Answer №1

To effectively manage each choice, it is recommended to enclose them in a div. Additionally, ensure to eliminate the space within the input [type="radio"] selector as it is considered invalid.

fieldset {
  background-color: #f9f9f9;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px
}

.form-input {
  margin-bottom: 30px;
  text-align: center;
}

.form-input .option label {
  display: block;
  margin-bottom: 8px;
}

.form-input .option input,
.form-input select {
  border: 1px solid #999;
  border-radius: 4px;
  padding: 6px;
  display: inline-block;
  width: 100%;
}

.form-input .option input[type="radio"] {
  width: auto;
  display: inline-block;
}

.option{
  display: flex;
  justify-content: space-around;
}
<div class="form-input">
  <label> Do you prefer cats or dogs?</label>
  <div class="option">
    <label for="Cats"> <input type="radio" id="Cats" name=PetChoice> Cats </label></div>
  <div class="option">
    <label for="Dogs"> <input type="radio" id="Dogs" name=PetChoice> Dogs </label></div>

</div>

Answer №2

To eliminate the spaces between "input" and "[type="radio"]", revise as shown below:

.form-control input[type="radio"]{
  width: auto;
  display:inline-block;  
}

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

Having issues with Div CSS functionality not properly functioning

My background CSS is working fine, but the styling for the .about div is not applying. Here is my HTML code: <DOCTYPE! HTML> <head> <link rel="stylesheet" type="text/css" href="CSS.css"> </head> <body> ...

csshtml

To properly document the results, I must utilize a button to record the identification of a specific color

I'm working on a code that creates a clickable box which changes colors from black to green to white by going through different shades of green whenever the mouse is clicked. What I now need to do is implement a feature that displays the current shade ...

javascriptjqueryhtmlcssexcel

Tips for aligning flex items based on the previous item in a flex container

Place 'text1' beneath the number 1 (so that the 't' character is under the 1), and 'text2' beneath the number 5 (with the '2' character under the number 5) This should be done dynamically to adjust to a varying numb ...

htmlcssangularflexboxcss-selectors

Move the element from the center of the screen back to its starting position

Looking to craft a single animation that will transition elements from the center of the current view back to their original positions. Unfortunately, CSS animations do not support toggling the display property. This limitation causes the second rectangle ...

htmlcss

tips for selecting various API requests based on the selected drop down menu choice

Hey there! I'm looking to enhance my login page by adding a feature that allows users to select from a dropdown menu with different options. Each option will be linked to a specific API, and based on the API response, the user's ability to log in ...

javascriptjqueryhtmlcssapi

Problem with CSS transition on horizontal scrolling list items

I am currently working on a horizontal list with list items. When I hover over the list, it is supposed to expand horizontally to display more information, although this feature has not yet been implemented. However, I am having trouble understanding why ...

csscss-transitionscss-animationsmousehover

Transferring HTML elements between pages

I'm currently working on a project with 4 tabbed views, each housed in separate HTML pages. Each view contains several SVG charts created using d3.js. Now, the client wants to be able to easily cut, paste, or move charts from one tabbed view to anothe ...

javascriptjqueryhtmld3.jssvg

Tips on extracting the value from the chosen option in 2 separate rows with identical IDs

While looping through my table, each row is identified by the id="batchNo". I am trying to retrieve the selected value of each select option in every row. Although I attempted to achieve this with the provided code snippet, it only retrieves the selected ...

javascriptjqueryhtml

Successfully executing complex designs using CSS grid or flexbox

I have a specific responsive layout that I need to achieve using a series of div tags. Below is the HTML structure I have: <div class="container"> <div>1</id> <div>2</id> <div>3</id> <div>4& ...

cssflexboxcss-grid

Add drop caps to every individual word within a hyperlink

Is there a way to recreate the menu effect similar to using CSS fonts and drop caps for each word? I'm aware of the CSS code: p.introduction:first-letter { font-size : 300%; } that enlarges the first character of the first word, but I want this ef ...

javascripthtmlcsscapitalization

Discrepancy found in C# Webbrowser control: the displayed content does not match the Document.inner

Currently, I am facing an issue with my website that is being loaded into the webbrowser control of my form. Despite loading the document successfully, when I try to retrieve the webbrowser.documenttext, I cannot seem to find a specific table that should b ...

c#htmlwindowsforms

Retrieve data from HTML Form arrays using JavaScript

I have a situation in my forms where arrays are being sent back in the following format: <input class="checkbox-service" name="services['electricity']" type="checkbox"> <input class="checkbox-service" name="services['water'] ...

javascriptjqueryhtml

MUI CSS: Mastering image manipulation

My MUI React Component features a Card that contains an image and buttons <Card key={index} className="xl:w-[350px] w-[310px] max-h-[450px]"> <img src={meme.url} className="center bg-cover" alt="" /> <Box cl ...

cssreactjsmaterial-uitailwind-css

CSS page rule option for optimal display in Safari

What is the workaround for using alternative rules in Safari? I am currently implementing the angularPrint directive to enable print functionality on certain pages. This directive includes some helper classes in my document and utilizes the @page direct ...

htmlcssprintingsafarimedia-queries

Difficulty encountered when trying to display multiple 3D models utilizing a URL as the source in conjunction with ar.js and A-frame

Recently delving into coding for A-frame projects has been an exciting learning experience. However, I encountered a setback while setting up a scene with multiple targets in A-frame - one of the 3D models failed to appear despite using a URL just like the ...

htmlar.js

Decrease the size of ion-list items in Ionic 2

I found a similar query over on Stack Overflow, but it's related to Ionic 1 where the ion-item still includes ion-content. In Ionic 2, there is no ionic-content element. I've attempted to adjust the height, padding, and margin of both the ion-ite ...

cssionic-frameworkionic2

Displaying different page sections according to scrolling position

I am in the process of developing a single-page website and I am interested in having each section load only when the window scrolls to that specific section. While I am aware that images can be lazy-loaded, I am looking to lazy load the entire section. On ...

phpjqueryhtmlwordpresslazy-loading

PHP script to compare the values of two radio buttons

this section contains a group of radio buttons <input type="radio" name="image" id="100" value="a"/> <input type="radio" name="image" id="100" value="b"/> <input type="radio" name="image" id="100" value="c"/> <input type="radio" name ...

phphtml

Ensuring file integrity during upload in Rails

Looking to adjust the dimensions and file size of an image using pixels? Check out this code snippet: <div class="control-group row"> <%= f.fields_for :activity_documents, @activity.activity_documents do |builder| %> & ...

ruby-on-railsrubyhtmlfilecoffeescript

Open Chrome in fullscreen mode directly from your Android home screen without the statusbar displayed

One of my clients is looking to have a specific website launched from an icon on an Android tablet. Since he is leasing the tablets, we have full control over the hardware. The goal is for these tablets to exclusively display his site (which is a slideshow ...

javascriptandroidhtmlgoogle-chromefullscreen