Aligning Radio Buttons on a Form

Code Help HTML/CSS/JS
1

I am creating a form/poll inside of a table and want the radio buttons to all align to the left at the same height across columns. For some reason the second radio within a column is slightly to the right as the other ones, and the spacing between radio buttons vary. Here is what it looks like.
image

Because I modified the radio buttons to be a square, I don’t know if that created a problem when aligning them. I modified the radio button by not displaying any input so that I can change its shape into a square .

Any help is appreciated!

2

Hello @nildaaaj !

Could you please provide the code snippet of your radio button?

2 Likes
3

try adding

vertical-align: center
1 Like
5 
/*code for making square radio */
 input {
  display: none;
}
   
label {
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
 
  
}

label span {
  position: relative;
  line-height: 22px;
  
}

label span:before,
label span:after {
  content: '';
}

label span:before {
  border: 2px solid #222021;
  width: 20px;
  height: 12px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: top;
}

label span:after {
  background: #222021;
  width: 16px;
  height: 8px;
  position: absolute;
  top: 2px;
  left: 4px;
  transition: 300ms;
  opacity: 0;
}

label input:checked+span:after {
  opacity: 1;
}
6

I make some changes in your code and I will go through each step explaining too.

/* I suggest adding [type="radio"] here to make sure that you only target radio inputs. 
   The way you were doing before would hide all inputs, including text inputs */
input[type="radio"] {
    display: none;
}

/* This looks ok*/
label {
    display: block; // changed to block to ensure consistent positioning
    padding: 5px 10px;
    cursor: pointer;
}

/* This too*/
label span {
    position: relative; // this allows absolute positioning of child elements (span:after) relative to this element
    line-height: 22px;
}

/* Here you were using ‘’ as the content, which is kinda cranky to work in some browsers.
   So I changed to "", which is a more universally accepted*/
label span:before,
label span:after {
    content: "";
}

/* Looks ok */
label span:before {
    border: 2px solid #222021;
    width: 20px;
    height: 12px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
}

/* Looks ok too */
label span:after {
    background: #222021;
    width: 16px;
    height: 8px;
    position: absolute;
    top: 2px; 
    left: 4px; 
    transition: 300ms;
    opacity: 0;
}

/* Here your rule had 'input:checked+span:after', which would select an element that is both an input and a span. It's better if you change to 'input[type="radio"]:checked + span:after', which will select a span that is a sibling of a checked radio input. */
label input[type="radio"]:checked + span:after {
    opacity: 1; // this makes the inner box visible when the radio button is checked
}
1 Like
7

All i had to do was change it from inline-block to block in label span!!! Thank you so much!!!
P.S Changing the input type to radio actually made the circle appear next to the box, so I kept it as input but at the end in
label input[type="radio"]:checked + span: after {

it worked fine!

Thank you so much!!!

1 Like