Yesterday we talked about styling the checkbox and radio button as suggested by Ryan Fait.
Styling checkbox and radio button with CSS and Javascript
Here is a simple solution for applying the checkbox and radio button in Drupal 7 webform.
1. Upload the radio.png, checkbox.png and select.png to your subtheme. (Omega subtheme is used in this example.)
.checkbox, .radio { width: 19px; height: 25px; padding: 1px 20px 0 0; background: url(<path>/checkbox.png) no-repeat; } .radio { background: url(<path>/radio.png) no-repeat; } .select { position: absolute; width: 158px; height: 21px; padding: 0 24px 0 8px; color: #fff; font: 12px/21px arial,sans-serif; background: url(<path>/select.png) no-repeat; overflow: hidden; }
3. Download the custom-form-elements.js file @ Las Vegas Web Design (Click the Download the full script link)
4. Modify the custom-form-elements.js
/* CUSTOM FORM ELEMENTS Created by Ryan Fait www.ryanfait.com The only things you may need to change in this file are the following variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26) The numbers you set for checkboxHeight and radioHeight should be one quarter of the total height of the image want to use for checkboxes and radio buttons. Both images should contain the four stages of both inputs stacked on top of each other in this order: unchecked, unchecked-clicked, checked, checked-clicked. You may need to adjust your images a bit if there is a slight vertical movement during the different stages of the button activation. The value of selectWidth should be the width of your select list image. Visit http://ryanfait.com/ for more information. */ /** * Modified by ykyuen for Drupal 7 * Url: http://eureka.ykyuen.info */ var checkboxHeight = "25"; var radioHeight = "25"; var selectWidth = "190"; /* No need to change anything after this */ document.write('<style type="text/css">input.form-radio, input.form-checkbox { display: none; } select.form-select { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>'); var Custom = { init: function() { var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active; for(a = 0; a < inputs.length; a++) { if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && (inputs[a].className == "form-checkbox" || inputs[a].className == "form-radio" || inputs[a].className == "form-checkbox error" || inputs[a].className == "form-radio error")) { span[a] = document.createElement("span"); span[a].className = inputs[a].type; if(inputs[a].checked == true) { if(inputs[a].type == "checkbox") { position = "0 -" + (checkboxHeight*2) + "px"; span[a].style.backgroundPosition = position; } else { position = "0 -" + (radioHeight*2) + "px"; span[a].style.backgroundPosition = position; } } inputs[a].parentNode.insertBefore(span[a], inputs[a]); inputs[a].onchange = Custom.clear; if(!inputs[a].getAttribute("disabled")) { span[a].onmousedown = Custom.pushed; span[a].onmouseup = Custom.check; } else { span[a].className = span[a].className += " disabled"; } } } inputs = document.getElementsByTagName("select"); for(a = 0; a < inputs.length; a++) { if(inputs[a].className == "form-select") { option = inputs[a].getElementsByTagName("option"); active = option[0].childNodes[0].nodeValue; textnode = document.createTextNode(active); for(b = 0; b < option.length; b++) { if(option[b].selected == true) { textnode = document.createTextNode(option[b].childNodes[0].nodeValue); } } span[a] = document.createElement("span"); span[a].className = "select"; span[a].id = "select" + inputs[a].name; span[a].appendChild(textnode); inputs[a].parentNode.insertBefore(span[a], inputs[a]); if(!inputs[a].getAttribute("disabled")) { inputs[a].onchange = Custom.choose; } else { inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled"; } } } document.onmouseup = Custom.clear; }, pushed: function() { element = this.nextSibling; if(element.checked == true && element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px"; } else if(element.checked == true && element.type == "radio") { this.style.backgroundPosition = "0 -" + radioHeight*3 + "px"; } else if(element.checked != true && element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight + "px"; } else { this.style.backgroundPosition = "0 -" + radioHeight + "px"; } }, check: function() { element = this.nextSibling; if(element.checked == true && element.type == "checkbox") { this.style.backgroundPosition = "0 0"; element.checked = false; } else { if(element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; } else { this.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; group = this.nextSibling.name; inputs = document.getElementsByTagName("input"); for(a = 0; a < inputs.length; a++) { if(inputs[a].name == group && inputs[a] != this.nextSibling) { inputs[a].previousSibling.style.backgroundPosition = "0 0"; } } } element.checked = true; } }, clear: function() { inputs = document.getElementsByTagName("input"); for(var b = 0; b < inputs.length; b++) { if(inputs[b].type == "checkbox" && inputs[b].checked == true && (inputs[b].className == "form-checkbox" || inputs[b].className == "form-checkbox error")) { inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; } else if(inputs[b].type == "checkbox" && (inputs[b].className == "form-checkbox" || inputs[b].className == "form-checkbox error")) { inputs[b].previousSibling.style.backgroundPosition = "0 0"; } else if(inputs[b].type == "radio" && inputs[b].checked == true && (inputs[b].className == "form-radio" || inputs[b].className == "form-radio error")) { inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; } else if(inputs[b].type == "radio" && (inputs[b].className == "form-radio" || inputs[b].className == "form-radio error")) { inputs[b].previousSibling.style.backgroundPosition = "0 0"; } } }, choose: function() { option = this.getElementsByTagName("option"); for(d = 0; d < option.length; d++) { if(option[d].selected == true) { document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue; } } } }
5. Upload the above js file to sites/all/themes/<theme name>/js
6. Add the following line in your <theme name>.info
scripts[] = js/custom-form-elements.js
7. Copy the html.tpl.php from the Omega theme folder to your Omega subtheme folder and add the Custom.init() in body onload
– This is the html.tpl.php of Omega subtheme
<?php print $doctype; ?> <html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf->version . $rdf->namespaces; ?>> <head<?php print $rdf->profile; ?>> <?php print $head; ?> <title><?php print $head_title; ?></title> <?php print $styles; ?> <?php print $scripts; ?> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <body<?php print $attributes;?> onLoad="javascript:Custom.init();"> <div id="skip-link"> <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a> </div> <?php print $page_top; ?> <?php print $page; ?> <?php print $page_bottom; ?> </body> </html>
8. Clear the Drupal cache and your webform components should be styled.
Done =)
Reference:
Thanks for this, it’s actually exactly what I was looking for – I’m even using a sub theme of Omega on D7! It’s not working at all and I can’t figure out why. just wondering if your markup is the same as my webform has been changed about a bit by a developer – my html for each radio btn looks like this:
Year 11
LikeLike
If you want to post the code, please follow the Syntax Highlight
I can’t read the code of your last comment. can you post again?
And can you elaborate more about how is it not working? Do u mean that the radio button images cannot be shown?
LikeLike
Ooops, here you go: Thanks. I don’t think the script is working because the classes are not being applied.
LikeLike
If you view the HTML source, could your find the onLoad=”javascript: Custom.init();” in the body tag?
LikeLike
Yeah, I can see
I’m assuming from the css that a class of “radio” is supposed to be getting added to my inputs, is that right? Have you got a demo of this up anywhere please?
Thanks a lot
LikeLike
If the code works, the radio input will be set to display: none; and a span with be inserted before the input.
here is an example after the code is run.
Could u add some alert(“message”); in the js file and see if it runs well? Also you can make use of the console in Chrome to check if there is any js error.
LikeLike
Hi,
Great tutorial, thankyou so much. I’m new to Drupal and its a steep learning curve.
Do you think you could give me some guidance on removing the select function form the styling. (i.e. I do not want the select (drop down) boxes to be styled).
Cheers,
Alex
LikeLike
Use the following piece of code.
LikeLike
Hi
Thanks for the quick reply, when I add that code, the non-styled checkboxes and radio buttons appear, as well as the styled ones… any ideas?
LikeLike
For Drupal 7 webform, the checkbox and radio button has default class and they will be hidden by
Do your checkbox and radio button have the .form-radio and .form-checkbox classes?
LikeLike
Managed to sort it out by using this code slightly different from what you gave me, thanks your your help.
LikeLike
Great~ good to know that u have solved the problem.
LikeLike
Hello again, sorry to bother you but I have another issue. I cant work out what is happening.
Some checkboxes are begin displayed and some are not. This is the code generated by the one that is not being displayed
and this is the markup that is generated for the checkboxes that are working
Is the span tag not being generated on the first one because it is a required checkbox?
Any help would be great thanks,
Alex
LikeLike
woops those code snippets did not display
LikeLike
Sorry here is the web page link the Terms and Conditions one will not display the one at the bottom does display.
http://kks-alex.grdev.co.nz/user/register
Cheers
LikeLike
i can see both checkboxes are working. you have solved the problem?
LikeLike
Hello! First of big thanks for the tutorial! However i have a small problem with the customised checkboxes. They work perfectly as intended, however i want to use conditional field module in combination with checkbox for another field to appear when box is checked.
After customizing the checkboxes using your method, the conditional field works only if user clicks directly on the option label ( not the checkbox itself!). I hope you understand what i mean, if someone clicks on checkbox it gets checked but the conditional field doesnt appear. But if someone clicks on the checkbox option label text then it gets checked and the conditional field appears.
Im not sure whats causing the problem for the other field not appearing if you click directly on the checkbox, but if u click on checkbox label near it then it works. If you know how to overcome it id be very grateful! Best regards thanks.
LikeLike
i guess this is becoz the webform conditional field use js to check the checkbox input. but the solution in this post will hide the checkbox and show a span instead. so it didn’t trigger the js code for the conditional field.
i suggest you can look into webform_conditional.js and see how the conditional field is triggered. and you can try to write your own js code to hide and show the conditional field.
hope this help. =D
LikeLike