Question

I designed a pretty cool looking form layout but have no clue how to make the radios on it work! Below is a mockup of the the form:

I’ve already created the CSS for the text inputs (and will attach it below for anyone else looking for something similar). What I now need to figure out is the “What service are you looking for?” section. I’ve written the CSS for the blue box but I now need to figure out how to turn “Consulting, Web Development, and Graphic Design” into radio selects where the one with the check mark next to it is the selected radio box. Way over my head. I’m still trying to figure it out and will post back here if I do; just looking for some input on how you’d write those radios.

Current code for text inputs:

input[type=text] {
     width: 365px;
     height: 54px;
     margin: 0 0 12px 0;
     padding: 0 0 0 25px;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     background: #a2bdd8;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #76899d), color-stop(0.075, #a2bdd8));
     color: #fff;
     font-size: 30px;
     border: none;
}
*:focus { outline: none; }

Current code for background to “What service are you looking for?”:

#options {
     width: 270px;
     height: 120px;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
     background: #a2bdd8;
}

Answer 1

jQuery has several radio/checkbox plugins. I like the one used on http://webscale.cms.ezcompany.nl/scan

<script src="/files/jquery.checkbox.min.js"></script>
<link rel="stylesheet" href="/files/jquery.checkbox.css" />
<script>
$('input[type=radio]').checkbox({empty: '/files/empty.png'});
</script>

Plugins list on jquery.com: http://plugins.jquery.com/plugin-tags/checkbox