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.)
2. Add the following style in the theme css and update the <path>
.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
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?
Ooops, here you go: Thanks. I don’t think the script is working because the classes are not being applied.
If you view the HTML source, could your find the onLoad=”javascript: Custom.init();” in the body tag?
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
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.
<div id="webform-component-gender" class="form-item webform-component webform-component-radios"> <label for="edit-submitted-gender">Gender</label> <div class="form-radios" id="edit-submitted-gender"> <div class="form-item form-type-radio form-item-submitted-gender"> <span class="radio" style="background-position: 0pt -50px;"></span> <input type="radio" class="form-radio" value="m" name="submitted[gender]" id="edit-submitted-gender-1"> <label for="edit-submitted-gender-1" class="option">M</label> </div> <div class="form-item form-type-radio form-item-submitted-gender"> <span class="radio" style="background-position: 0pt 0pt;"></span> <input type="radio" class="form-radio" value="f" name="submitted[gender]" id="edit-submitted-gender-2"> <label for="edit-submitted-gender-2" class="option">F</label> </div> </div> </div>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.
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
Use the following piece of code.
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?
For Drupal 7 webform, the checkbox and radio button has default class and they will be hidden by
/* No need to change anything after this */ document.write('input.form-radio, input.form-checkbox { display: none; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }');Do your checkbox and radio button have the .form-radio and .form-checkbox classes?
Managed to sort it out by using this code slightly different from what you gave me, thanks your your help.
Great~ good to know that u have solved the problem.
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
KoolKidSpace news I will accept relevant monthly promotional emails from KoolKidsSpace Ltd.Is the span tag not being generated on the first one because it is a required checkbox?
Any help would be great thanks,
Alex
woops those code snippets did not display
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
i can see both checkboxes are working. you have solved the problem?