CodeSlayer2010 CodeSlayer2010 - 4 months ago 14
CSS Question

Left-align radio button label combo vertically on separate lines with only CSS

The Issue



I have a group of radio buttons that are organized vertically, stacked. They are on separate lines by use of <br> tag. I want to align them vertically using CSS, left-aligned, 100 pixels from the left. It doesn't seem like it would be that hard, but I haven't got it figured out yet. Here's an illustration I made to clarify the desired result:

The default alignment:



+----------------------------------------------------------------+
| |
| |
| |
| |
| * choice 1 |
| * choice 2 is a different length |
| * choice 3 is also long |
| |
| |
| |
| |
| |
+----------------------------------------------------------------+


The desired left-aligned radio buttons with labels on right:



+----------------------------------------------------------------+
| |
| |
| |
| |
| * choice 1 |
| * choice 2 is a different length |
| * choice 3 is also long |
| |
| |
| |
| |
| |
+----------------------------------------------------------------+


Made with Asciiflow.com

The code



Here is my code:

CSS & HTML





form {
background-color: #ffffb3;
font-family: Arial, sans-serif;
padding: 10px;
border: 2px solid #000000;
min-width: 600px;
max-width: 690px;
width: 80%;
margin: 0 auto;
min-height: 200px;
}
label {
margin-left: 100px;
postion: absolute;
}
/*input[type="checkbox"]:checked + */

<form method="POST" action="mailto:eric.hepperle@pcc.edu">

<h2>Visitor Survey</h2>

<fieldset>

<label for="myName">Your Name:</label>
<input type="text" name="myName" id="myName">
<br>

<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
<br>

</fieldset>

<p>What is your favorite movie?</p>

<input type="radio" name="movie" id="transformers" value="Transformers!">
<label for="transformers">Transformers!</label>
<br>
<input type="radio" name="movie" id="dark-knight" value="Dark Knight">
<label for="dark-knight">Dark Knight</label>
<br>
<input type="radio" name="movie" id="goodwillhunting" value="Good Will Hunting">
<label for="goodwillhunting">Good Will Hunting</label>

<br>
<br>

<input type="submit" value="Submit Query">
<input type="reset" value="Reset">

</form>





What I've Tried Already




  • Searched the web and StackOverflow but the results weren't exactly applicable.

  • I've tried floating both button and label left, margin-left: 100px, position absolute, but it doesn't work.

  • I've tried messing with
    input[type="radio"] + label
    (but I need the label to come first), to no avail.

  • Wrapping the radio buttons and labels in a fieldset.



My Questions




  1. So, I have several questions:

  2. How to do this elegantly with CSS WITHOUT USING DIVS OR FIELDSETS? Or, in other words, can this be done with plain CSS with just the label and input[type="radio"] selectors?

  3. I understand that fieldsets are for accessibility, but I'm wondering is it best practice to use fieldsets, or are they a technique that is growing obsolete?

  4. Can I align the radios and their labels in separate lines vertically without using the <br> tag?



Any help is appreciated

Answer

Something like this?

  1. Stack the radio button and label combo using pseudo elements (:after in this case). No need of <br>.
  2. Apply margin-left to input[type="radio"] instead of label.

Using :after I have created a empty block (display: block;). This empty block is placed at the end of label so it pushes the next element to a new line.

Note:

For explanation, I have highlighted the empty block(created by :after) with a red border. Remove if necessary.

form {
  background-color: #ffffb3;
  font-family: Arial, sans-serif;
  padding: 10px;
  border: 2px solid #000000;
  min-width: 600px;
  max-width: 690px;
  width: 80%;
  margin: 0 auto;
  min-height: 200px;
}
label {
  margin-left: 100px;
}
input[type="radio"] {
  margin-left: 100px;
}
input[type="radio"] + label {
  margin-left: 10px;
}
input[type="radio"] + label:after {
  content: '';
  display: block;
  /* Below code(border: 1px solid red;) is just for illustration, remove if necessary */
  border: 1px solid red;
}
/*input[type="checkbox"]:checked + */
<form method="POST" action="mailto:eric.hepperle@pcc.edu">

  <h2>Visitor Survey</h2>

  <fieldset>

    <label for="myName">Your Name:</label>
    <input type="text" name="myName" id="myName">
    <br>

    <label for="email">Email Address:</label>
    <input type="text" name="email" id="email">
    <br>

  </fieldset>

  <p>What is your favorite movie?</p>

  <input type="radio" name="movie" id="transformers" value="Transformers!">
  <label for="transformers">Transformers!</label>
  <input type="radio" name="movie" id="dark-knight" value="Dark Knight">
  <label for="dark-knight">Dark Knight</label>
  <input type="radio" name="movie" id="goodwillhunting" value="Good Will Hunting">
  <label for="goodwillhunting">Good Will Hunting</label>

  <br>
  <br>

  <input type="submit" value="Submit Query">
  <input type="reset" value="Reset">

</form>