How do I change the toggle widget into a button?

How can I change the toggle widget into a button?

Currently it looks like this with a checkbox: Imgur: The magic of the Internet

But I want it to be a button. So it looks something like this when you click it and it is “on” Imgur: The magic of the Internet and looks like this when “off” Imgur: The magic of the Internet

Is this possible?

I probably could have achieved it using pure CSS, but because you have positioned the input inside the label instead of outside the label I don’t think that can be done.

Using this CSS:

label { background-color:#333; color:#FFF; }

input[type="checkbox"]:checked + label {
    background: brown;
}

This would have worked:

<input type="checkbox">
<label>
     my checkbox text
</label>

But this is the structure of the HTML your toggle widget is using, and therefore cannot be converted into a CSS button:

<label>
     <input type="checkbox">my checkbox text
</label>

See here: html - Change checkbox label css property with checkbox checked - Stack Overflow

Any ideas?

Can I change the HTML structure of the widget somehow?

Talking to my self here haha, but I figured it out.

Here is the CSS code if anyone has the same problem, obviously change to style as you want:

.ais-toggle–item__active {
background-color: #eee;
}
.ais-toggle–checkbox {
display: none;
}
.ais-toggle–item {
border: 1px solid red;
text-align: center;
border-radius: 5px;
}

1 Like

Hey @thecashbag,

You should be able to change the DOM completely as you like with the connectToggle. there’s an example on how to use it at the bottom of the page. I’m sure this will save you some CSS headaches