2

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: Sample of 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;
}
Robert Klubenspies
  • 438
  • 1
  • 7
  • 21
  • 1
    Possibly related: http://stackoverflow.com/questions/5112995/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo – Blender Apr 25 '11 at 01:44

3 Answers3

1

Well, I see you got an answer, but I built you a jsFiddle demo because I love these types of challenges:

http://jsfiddle.net/Madmartigan/VkTZa/1/

Uses jQuery (couldn't think of a pure css good solution). Maybe it's a bit simpler than using a plugin?

Enjoy!

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
0

You will need to create images and replace your checkboxes with these images. Then switch them with javascript when checkbox is clicked.

Edit:
I know, that google isn't cool anymore, since there is SO, but maybe you will find these links useful:
Custom checkbox howto
Another customized checkbox script & tutorial

Damb
  • 14,410
  • 6
  • 47
  • 49
  • Sounds like a plan. That's what I was figuring but I was trying to refrain from using Javascript. Guess I have no choice. And to answer your question, just a couple of friends. Do you have any design advice to make it look better? – Robert Klubenspies Apr 25 '11 at 01:47
  • It's not possible to make changes like this in pure css afaik. And my design advice would be just a subjective oppinion, so probably not rly helpful. But.. I would definitely start with adding contrast (at least to submit button), and tweak font sizes. – Damb Apr 25 '11 at 01:51
  • You could do the styling without JS, but the toggling would then still be JS. Eg `input[type="checkbox"] + span { ..unchecked.. } input[type="checkbox"]:checked + span { ..checked.. }` (and hide the inputs) – Rudie Apr 25 '11 at 01:55
  • @Rudie: True. But I personally don't trust those 'advanced' selectors.. because there are most probably browsers (not naming any :d) that won't like them. But on the other hand.. I haven't been doing any heavy css styling for some time, so it might be working just fine nowadays with ie6 being dead :) – Damb Apr 25 '11 at 02:00
  • Very true. I use the jQuery plugins too. And not the advanced selectors. IE6 and 7 are dead to me and have been for a while. IE8 doesn't even support all CSS2 selectors! – Rudie Apr 25 '11 at 02:32
0

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

Rudie
  • 52,220
  • 42
  • 131
  • 173