title: MVC Radio Button Design Options
body: <p>I am creating an MVC mobile application.
  One of my screens contains radio buttons for a user to select the length of their hair, their eye colour and etc.
  The current styling is incredibly bulky, with each item taking up a whole row.</p>
  
  <p>What other styling options do I have at my disposal?
  Here is a screenshot so you can see how much room it's taking up.
  <a href="http://i.imgur.com/PgRr1.png" rel="nofollow">http://i.imgur.com/PgRr1.png</a></p>
  
  <p>The following is some exerts of code for @danm</p>
  
  <p>This is Views/PersonalDetails/Edit.cshtml.</p>
  
  <pre><code>    &lt;fieldset&gt;
          &lt;legend&gt;Hair Length&lt;/legend&gt;
          @Html.RadioButtonFor(e =&gt; e.HairLength, 0, new { id = "hair-short" })
          @Html.Label("hair-short", "Short")
          @Html.RadioButtonFor(e =&gt; e.HairLength, 1, new { id = "hair-medium" })
          @Html.Label("hair-medium", "Medium")
          @Html.RadioButtonFor(e =&gt; e.HairLength, 2, new { id = "hair-long" })
          @Html.Label("hair-long", "Long")
      &lt;/fieldset&gt; 
  </code></pre>
  
  <p>This is site.cs</p>
  
  <pre><code>.field-validation-error {
  color: #f00;
  display: block;
  margin-top: 8px;
  text-align: center;
  }
  
  .field-validation-valid {
  display: none;
  }
  
  .input-validation-error {
  border: 1px solid #f00;
  background-color: #fee;
  }
  
  .validation-summary-errors {
  font-weight: bold;
  color: #f00;
  }
  
  .validation-summary-valid {
  display: none;
  }
  
  .input input {
  float: left;
  }
  .input label {
  margin: 0px, 0px, 5px, 5px;
  }
  
  /* jQuery mobile styles
  -----------------------------------------------------------*/
  
  /* Make listview buttons fill the whole horizontal width of the screen */
  .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
  padding-right: 15px;
  }
  
  .ui-bar-a, .ui-body-a, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a,
  .ui-bar-b, .ui-body-b, .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b,
  .ui-bar-c, .ui-body-c, .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c,
  .ui-bar-d, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d,
  .ui-bar-e, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e,
  .ui-btn-active  {
  text-shadow: none;
  }
  </code></pre>