[jkonnikovaParticipant]

Hello, X Team!

I want to add check boxes to my page and I started testing. I want an empty square box when unchecked and check mark inside when checked.

I added Text element to the section and the following HTML to the text area:
<div class=”checkboxFive”>
<input type=”checkbox” value=”1″ id=”checkboxFiveInput” name=”” />
<label for=”checkboxFiveInput”></label>
</div>
Then I added the folowing custom CSS:

.checkboxFive {
width: 25px;
margin: 20px 100px;
position: relative;
}
.checkboxFive label {
cursor: pointer;
position: absolute;
width: 25px;
height: 25px;
top: 0;
left: 0;
background: #eee;
border:1px solid #ddd;
}
.checkboxFive label:after {
opacity: 0;
content: ”;
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 7px;
border: 3px solid #333;
border-top: none;
border-right: none;

transform: rotate(-45deg);
}
/**
* Create the hover event of the tick
*/
.checkboxFive label:hover::after {
opacity: 0.5;
}

/**
* Create the checkbox state for the tick
*/
.checkboxFive input[type=checkbox]:checked + label:after {
opacity: 1;
}

Hover state works fine, but checked state does not work. Could you please tell me what am I doing wrong?

Thank you very much for your help,
Jane

[JoaoModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[jkonnikovaParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for providing the information. Regretfully we have logged because it seems that you forgot to give the username. In the meantime, instead of using a text element, please use the raw content element instead.

Please let us know how it goes.

[jkonnikovaParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Remove the line breaks or <br> and it will work. The + sign means select label element next to it, but it the <br> element is next to your checkbox and not the label.

Cheers!

[jkonnikovaParticipant]

Thank you so much, Rad! It worked!

Thank you X team for the great support you provide!

Jane

[JoaoModerator]

Glad to hear it Jane and thanks for your kind words.

Joao

[Author]

Posts