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:
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
精彩评论