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: https://imgur.com/a/TtsdhfC

But I want it to be a button. So it looks something like this when you click it and it is “on” https://imgur.com/a/VyX0A1m and looks like this when “off” https://imgur.com/a/heHl2ji

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: https://stackoverflow.com/questions/21048368/change-checkbox-label-css-property-with-checkbox-checked

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