Has anybody here had success styling radio inputs or checkboxes on Unbounce forms to appear as buttons?
I’m doing it on a page with a multistep form, but it required enough hacking of the form through the Unbounce form builder + css that I’m thinking this isn’t super reproducible.
Here’s what I’ve gotten a radio input to look like:
Here’s a gist of the CSS I used
Curious if anybody has done something similar or has any ideas about how to improve it.
A while back I was playing around with some styling. It’s still active on this test page if you want to inspect and take a look.
http://unbouncepages.com/free-puritan-delivery-pickup/
Lemme know if you have any questions 🙂
Oh, awesome! This looks like it should get me on my way! Thank you!
Update for anybody watching, I was able style checkboxes and radio buttons into buttons. Note: I have to use the Font Size setting for checkboxes and radio buttons on the unbounce page builder to set the line height, otherwise the buttons will overlap. The CSS is here
Awesome! Thanks for sharing @NoahManion
Hey Kyle!
I’m really interested in creating buttons like the ones you placed in the “Ready to get started” part of the test page.
Could you share the coding necessary to style them that way or some guidance to do so? 😀
Thanks a lot!
Of course 🙂
Here is the CSS for the radio buttons. Place it between the opening and closing style tags. Don’t forget that custom CSS doesn’t display in the builder, you view it in preview or on the live URL.
/* Style Radio Buttons */
.ub-input-item.input-wrap.optionsList inputntype="radio"]{
display:none;
}
.option {
margin-bottom: inherit !important;
}
.option label {
position: relative !important;
margin-bottom: inherit !important;
}
.option span::before,
.option span::after {
content: '' !important;
position: absolute !important;
top: 5px !important;
bottom: 5px !important;
margin: auto !important;
}
.option span.label-style:hover {
cursor: pointer !important;
}
.option span.label-style::before {
left: -52px !important;
width: 45px !important;
height: 25px !important;
background-color: #F2B731 !important;
border-radius: 50px !important;
}
.option span.label-style::after {
left: -49px !important;
width: 17px !important;
height: 17px !important;
border-radius: 10px !important;
background-color: #999999 !important;
transition: left .25s, background-color .25s !important;
}
inputntype="radio"]:checked + label span.label-style::after {
left: -27px !important;
background-color: #000000 !important;
}
#ub-option-start-item-1{
padding-top: 10px !important;
}Hi Kyle!
I’m having an issue with the labels being covered when I adjust the left margins to move my sliders over. Is this something you’ve encountered/can help with?
Sounds like the labels might be too long for the whole container. I could try and help.
Could you share the page you are testing this on?
I will message you a screenshot because I don’t have it on a tester page
Hi Kyle! I’m using this on a page and have the fields declared as required, but the error/validation messages aren’t working. Any idea what could be happening?
Hi
I have successfully styled some radio buttons based on the above approach. The form I have also has a default value set.
I’ve noticed that if a different value to the default is selected the form display switches back to the default selection when the submit button is pressed.
This is obviously disconcerting for users and I can’t figure out what would cause it.
Any ideas how to prevent or rectify this?
Thanks!
Hey all, I’m using this script at the moment (below) but would like to make it so all the buttons are an equal width (say 350px) and the text is centered in them. Can anyone help with that? I’d tried a few variations but keep getting nowhere.
Are you looking for buttons or the toggle like Kyle has? I have styling for buttons that I’ll attach, but I haven’t played with the width at all.
/* style checkboxes and radios as buttons */
.option input {
display:none;
}
.option {
padding: 10px;
width: 50%;
}
.option label {
position: absolute !important;
padding-top: 5px;
}
.option span::before,
.option span::after {
content: ‘’ !important;
position: absolute !important;
top: 5px !important;
bottom: 5px !important;
margin: auto !important;
margin-bottom: 15px !important;
font-size: 15px !important;
}
.option span.label-style {
border: 1px solid #ffffff !important;
background-color: rgba(71,10,104,1) !important;
font-family: Roboto !important;
color: #ffffff !important;
padding: 5px 8px 5px 8px !important;
border-radius: 10px !important;
margin-bottom: 15px !important;
margin-top: 15px !important;
font-size: 15px !important;
}
.option span.label-style:hover {
background-color: rgb(255, 233, 0) !important;
cursor: pointer !important;
color: #000000 !important;
}
input:checked + label span.label-style {
background-color: rgb(255, 233, 0) !important;
color: #000000 !important;
}
#up-option-start-item-1 {
padding-top: 10px !important;
}
I’m looking for Buttons - here is a quick screenshot of my current design. As you can see the width is based on the text width - but I’d like to make them all uniform. Any ideas? I really appreciate the help!
Hi Kyle! I have a question for you, It’ll! be good for me to get your help on this. I just wanna change the radio color, right now it is light blue, as always, but I want it grey, just that, I don’t wanna change the style or the size or anything, just the color. Do you have any idea how can I do this? Thanks a lot for your attention and help.
Screenshot 2021-03-26 115001|178x176 ! Screenshot 2021-03-26 114905|301x227
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
