Hi guys,
I’m trying to replace the checkbox with an image and once clicked it owverlays a checkmark. The html is autogenerated by formidable. Thus it cannot b changed. It has to be css generated.
Link for site
<div id="frm_field_84_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label">Checkboxes
<span class="frm_required"></span>
</label>
<div class="frm_opt_container">
<div class="frm_checkbox" id="frm_checkbox_84-0">
<label for="field_2hn10m-0">
<input type="checkbox" name="item_meta[84][]" id="field_2hn10m-0" value="Option 1"/> Option 1</label>
</div>
<div class="frm_checkbox" id="frm_checkbox_84-1">
<label for="field_2hn10m-1">
<input type="checkbox" name="item_meta[84][]" id="field_2hn10m-1" value="Option 2"/> Option 2</label>
</div>
</div>
</div>
CSS
label[for=field_2hn10m-1] input[type="checkbox"]{
display: none;
}
label[for=field_2hn10m-1]:before {
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
z-index: 10;
content: "";
display: inline-block;
font-size: 12px;
height: 75px;
width: 75px;
line-height: 16px;
margin: -2px 6px 0 0;
text-align: center;
vertical-align: middle;
position: relative;
border-radius: 10px;
background-color: #6283B2;
}
label[for=field_2hn10m-1]:before.checked{
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/checkmark.png'), url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
height: 75px;
width: 75px;
border-radius: 10px;
background-color: #37924A;
}
This is the example of what im trying to achieve. Thank you
PaulOB
January 21, 2016, 11:06am
3
Hi,
Unfortunately a label doesn’t have a :checked state that you can use. The input has the checked state but your label is a parent of the checkbox and in CSS there is no way to go back up the DOM.
For your method to work the input would need to be before the label in the html so that you can target the label once the checkbox is checked. e.g. input:checked + label {}.
If you can’t change the html then your only recourse would be to use js to achieve the affect you want I’m afraid.
m3g4p0p
January 21, 2016, 11:17am
4
Don’t know about formidable, but the site boldly advertises “unlimited possibilities with completely customizable form HTML”… so maybe there’s an option to change this aspect via the settings or something?
PaulOB
January 21, 2016, 12:28pm
5
so maybe there's an option to change this aspect via the settings or something?
Good point. I didn’t check that.
Making progress. ONLY CHANGED THE CSS. THE HTML IS UNCHANGED. The image is not showing up. Please take a look.
PAGE LINK
HTML
<div class="frm_opt_container">
<div class="frm_checkbox" id="frm_checkbox_84-0">
<label for="field_2hn10m-0">
<input type="checkbox" name="item_meta[84][]" id="field_2hn10m-0" value="Option 1"/> Option 1</label>
</div>
<div class="frm_checkbox" id="frm_checkbox_84-1">
<label for="field_2hn10m-1">
<input type="checkbox" name="item_meta[84][]" id="field_2hn10m-1" value="Option 2"/> Option 2</label>
</div>
</div>
CSS
label[for=field_2hn10m-1] input[type="checkbox"]{
display: none;
}
label[for=field_2hn10m-1] input[type="checkbox"] {
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
z-index: 10;
content: "";
display: inline-block;
font-size: 12px;
height: 75px;
width: 75px;
line-height: 16px;
margin: -2px 6px 0 0;
text-align: center;
vertical-align: middle;
position: relative;
border-radius: 10px;
background-color: #6283B2;
}
label[for=field_2hn10m-1] input[type="checkbox"]:checked{
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/checkmark.png'), url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
height: 75px;
width: 75px;
border-radius: 10px;
background-color: #37924A;
}
This is working partially… The image is not showing up… PLEASE advise…
Off Topic
@Us_Web_Company : when you post code here, there are various ways to format it so it will display correctly in your post.
You can highlight your code, then use the </> button in the editor window.
Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.
1 Like
Thank you. I’m sorry for the mistake. I will do this in the future.
1 Like
No problem. You’re not the first, and I’m sure you won’t be the last.
PaulOB
January 21, 2016, 3:07pm
10
Hi,
The reason that images are applied to labels is because you can’t consistently style a checkbox and that’s why that label replacement method has evolved as the best way to get graphics for checkboxes or radio buttons.
These days you can do a little more styling than before but there are still limitations. You can get rid of the default appearance in webkit using -webkit-appearance none but is not consistent throughout all browsers.
label[for=field_2hn10m-1] input[type="checkbox"] {
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
z-index: 10;
display: inline-block;
font-size: 12px;
height: 75px;
width: 75px;
line-height: 16px;
margin: -2px 6px 0 0;
text-align: center;
vertical-align: middle;
position: relative;
border-radius: 10px;
background-color: #6283B2;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
}
In webkit it should look more or less like you want. In firefox there are still some artefacts left over and IE doesn’t play ball at all (except for IE edge which display it as well as webkit).
1 Like
PAULOB you rock!!! How do I get rid of that?
Please see page FIREFOX
CHROME
CSS http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png ’) 0 0px no-repeat;#6283B2 ;
label[for=field_2hn10m-1] input[type=“checkbox”]:checked{http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/checkmark.png ’), url(‘http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png ’) 0 0px no-repeat;#37924A ;
Please let me know. Thank you all.
PaulOB
January 21, 2016, 5:47pm
12
I don’t think its possible (or at least I haven’t found a way to do it).
There’s a long standing bug about it here at bugzilla .
You may have to live with it if you can’t change the html or add js.
PaulOB
January 21, 2016, 6:00pm
14
The nearest I can get is to give the checkbox a height so that the checkmark is down the screen and then set the label to hide the overflow.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
label[for=field_2hn10m-1]{
height:75px;
line-height:75px;
overflow:hidden;
display:inline-block;
border-radius:10px;
}
label[for=field_2hn10m-1] input[type="checkbox"] {
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
z-index: 10;
display:block;
float:left;
font-size: 12px;
height: 200px;
width: 75px;
line-height: 16px;
margin:0 6px 0 0;
text-align: center;
vertical-align: middle;
position: relative;
border-radius: 10px;
background-color: #6283B2;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
outline:0;
border:none;
}
label[for=field_2hn10m-1] input[type="checkbox"]:checked{
background: url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/checkmark.png'), url('http://www.uswebcompany.com/plugins/gravityforms/wp-content/uploads/2016/01/christmasLights.png') 0 0px no-repeat;
background-color: #37924A;
}
</style>
</head>
<body>
<div class="frm_opt_container">
<div class="frm_checkbox" id="frm_checkbox_84-0">
<label for="field_2hn10m-0">
<input type="checkbox" name="item_meta[84][]" id="field_2hn10m-0" value="Option 1"/> Option 1</label>
</div>
<div class="frm_checkbox" id="frm_checkbox_84-1">
<label for="field_2hn10m-1">
<input type="checkbox" name="item_meta[84][]" id="field_2hn10m-1" value="Option 2"/> Option 2</label>
</div>
</div>
</body>
</html>
You’d have to lose the border-radius though as I can only get three corners rounded with that method.
1 Like
Thanks a lot paul. I’ll fidget with it.
system
April 22, 2016, 1:14am
16
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
