I'm not sure if this is in the correct place or if I've titled the subject correctly as this is my first time posting.
This is not a plea for help, I just figured out an awesome solution to an issue I was having with
radio button selection.

I'm still fairly new to drupal development, so please if there is a better method let me know!

The issue
I wanted to have the radio button inputs hidden and the title of the radio button to be visible.
So when a user selects one of the options in the radio group the title of the radio button
would indicate that the user has selected that option.

I first went the javascript route, seemed like a no brainer, but came to find out adding
attributes to radios with the drupal form api is easier said than done.

I tired using the #after_build element to add on a class to each of the radio options with no luck.

The Solution
Sometimes we over complicate things, add fancy scripts and increase our load time, when in fact
the best solution is good ol' css.

This may not be the perfect solution for everyone, but this may help someone figure out an alternative route for a similar issue.

Inside my form input option array I wrapped a span inside the options' title.
This may not be proper use of the t function, so please let me know if there is a proper way.

<?php
    $form
['assignment_type'] = array(
       
'#type' => 'radios',
       
'#title' => t('What kind of assignment were you on?'),
       
'#options' => array(
              
'community' => t('<span>Community</span>'),
              
'conference' => t('<span>Conference</span>'),
          ),
       
'#default_value' => timetracking_default_value($form_state['storage'],'assignment_type'),
      );
?>

The html structure for the radio group went as follows

<div>
   <label>
      <input type="radio" value="community"/>
      <span>Community</span>
   </label>
</div>
<div>
   <label>
      <input type="radio" value="conference" />
      <span>Conference</span>
   </label>
</div>

Then the css for this fix went like

label span{
  padding: 20px;
  margin-bottom: 0;
  margin-right: 10px;
  background-color: #6A5B80;
  color: #ffffff;
  display: block;
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked+span{
  background-color:#006ACC;
}

I'm also now aware conference is misspelled inside the vocab list.

Again, any input / constructive criticism to the solution is welcomed.