Checkbox styling in forms

[Anton]

Hi, 

a client has a a very specific form styling on his page and wants to have the HubSpot form-checkboxes styled equaly. 

the states from the original form

I've managed to do the "normal"-state by overwriting the css for the form.  But I'm stuck on the "Check"-Icon in the "checked"-state.

The CSS for the Checkboxes looks like this:

[type="radio"]:checked,
[type="radio"]:not(:checked),
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + span,
[type="radio"]:not(:checked) + span
{
    position: relative;
    padding-left: 82px;
    cursor: pointer;
    line-height: 60px;
    display: inline-block;
}

[type="checkbox"]:checked + span,
[type="checkbox"]:not(:checked) + span{
    position: relative;
    padding-left: 82px;
    cursor: pointer;
	   display: inline-block;
	margin:7px 0px;
	font-family: 'Brix Sans Light';
font-size: 18px;
    line-height: 28px;
	text-transform:none;
	padding-top:12px;
}
[type="radio"]:checked + span:before,
[type="radio"]:not(:checked) + span:before,
[type="checkbox"]:checked + span:before,
[type="checkbox"]:not(:checked) + span:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    background:#ced2d5;
	
}
[type="radio"]:not(:checked) + span:after {
    content: '';
     width: 20px;
    height: 20px;
    background: #fff !important;
    position: absolute;
    top: 14px;
    left: 14px;
    border-radius: 100%;	
}
[type="checkbox"]:not(:checked) + span:after {
    content: '';
     width: 20px;
    height: 20px;
    background: #fff !important;
    position: absolute;
    top: 14px;
    left: 14px;
}
[type="radio"]:checked + span:after {
    content: '';
    width: 8px;
    height: 8px;
    background: #000;
    position: absolute;
    top: 14px;
    left: 14px;
    border-radius: 100%;
				border:6px solid #fff;
}
[type="checkbox"]:checked + span:after {
    content: '';
    width: 12px;
    height: 12px;
    background: url("path/to/the/check-icon.png") no-repeat;
    position: absolute;
    top: 18px;
    left: 18px;
border:6px solid #fff;
	
}

[type="radio"]:not(:checked) + span:after, [type="radio"]:checked + span:after,[type="checkbox"]:not(:checked) + span:after, [type="checkbox"]:checked + span:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

I'm out of ideas, why the icon doesn't show up. 

Can someone help me please

regards,

Anton

[tjoyce · Accepted solution]

@Anton - You need to make sure your checkbox and span are wrapped in the label tag, in order for the span to trigger the checkbox. Use the for attribute in the label to target the checkbox id. If this is an embed form, you might need to use javascript or jquery to inject the necessary elements and attributes but, the html structure should look like this:

<label for="mycheck">
     <input type="checkbox" id="mycheck" />
     <span></span>
</label>

 Here's a plunkr demo

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[tjoyce · Accepted solution]

@Anton - You need to make sure your checkbox and span are wrapped in the label tag, in order for the span to trigger the checkbox. Use the for attribute in the label to target the checkbox id. If this is an embed form, you might need to use javascript or jquery to inject the necessary elements and attributes but, the html structure should look like this:

<label for="mycheck">
     <input type="checkbox" id="mycheck" />
     <span></span>
</label>

 Here's a plunkr demo

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[Anton · Accepted solution]

@tjoyce - thanks for your help. A Javascript/jQuery workaround seems quite a good idea. 

I've managed to get a whole CSS "hack" since i wrote the topic.

Here's a solution if someone is interested (radio buttons are styled too)

[type="radio"]:checked,
[type="radio"]:not(:checked),
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + span,
[type="radio"]:not(:checked) + span
{
    position: relative;
    padding-left: 82px;
    cursor: pointer;
    line-height: 60px;
    display: inline-block;
}

[type="checkbox"]:checked + span,
[type="checkbox"]:not(:checked) + span{
    position: relative;
    padding-left: 82px;
    cursor: pointer;
	   display: inline-block;
	margin:7px 0px;
	font-family: 'Brix Sans Light';
font-size: 18px;
    line-height: 28px;
	text-transform:none;
	padding-top:12px;
}
[type="radio"]:checked + span:before,
[type="radio"]:not(:checked) + span:before,
[type="checkbox"]:not(:checked) + span:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    background:#ced2d5;
	
}
[type="checkbox"]:checked + span:before{
	 content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border: 14px solid #ced2d5;
		background:#fff;
}
[type="radio"]:not(:checked) + span:after {
    content: '';
     width: 20px;
    height: 20px;
    background: #fff !important;
    position: absolute;
    top: 14px;
    left: 14px;
    border-radius: 100%;	
}
[type="checkbox"]:not(:checked) + span:after {
    content: '';
     width: 20px;
    height: 20px;
    background: #fff !important;
    position: absolute;
    top: 14px;
    left: 14px;
}
[type="radio"]:checked + span:after {
    content: '';
    width: 8px;
    height: 8px;
    background: #000;
    position: absolute;
    top: 14px;
    left: 14px;
    border-radius: 100%;
				border:6px solid #fff;
}
[type="checkbox"]:checked + span:after {
    content: '';
    width: 12px;
    height: 12px;
    background: url("path/to/the/check-icon.png") no-repeat;
	background-size:contain;
    position: absolute;
    top: 19px;
    left: 18px;
					
}

[type="radio"]:not(:checked) + span:after, [type="radio"]:checked + span:after,[type="checkbox"]:not(:checked) + span:after, [type="checkbox"]:checked + span:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

[jtEnvoy]

Anton,

I know this is an old thread, but your solution was very helpful and I was glad to find it as it saved me a lot of time.

However, I'm running into one weird issue. On the subscription preferences page, the 'unsubsubcribe all' checkbox works perfectly. The other options won't 'check'. Nothing happens.

If I hide the code that moves the original box all the way out to the left, and you can see the original checkboxes... it does work, if I click on those original boxes (it highlights the box with my custom checkmark correctly).

I wish I could share the page directly, but my client won't allow it until it goes live, unfortunately. I figured it was probably some other CSS blocking the click, so I z-index'd it forward, tried hiding all other things around it, but nothing seems to work. I just can't seem to isolate where the issue is coming from.

I'm hoping for some guidance on a place to look as it's driving me insane. Any help is greatly appreciated.

Thank you,
Jeff T.