Checkbox styling in forms

SOLVE
Anton
Key Advisor | Diamond Partner

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 formthe 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




check
Did my post help answer your query? Help the Community by marking it as a solution



0 Upvotes
2 Accepted solutions

Accepted Solutions
tjoyce
Solution
Recognized Expert | Platinum Partner

@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.

View solution in original post

Anton
Solution
Key Advisor | Diamond Partner

@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);
}



check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

2 Replies 2
tjoyce
Solution
Recognized Expert | Platinum Partner

@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.

View solution in original post

Anton
Solution
Key Advisor | Diamond Partner

@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);
}



check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post