CSS Challenge: Custom Radio Selects
I designed a pretty cool looking form layout but have no clue how to make the radios on it work! Bel开发者_开发问答ow 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;
}
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!
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
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
精彩评论