Style Checkboxes to look like Buttons?

  • Hello! Is there some way to style CF7 checkboxes to look like buttons? I’ve been able to add a border to my checkboxes, but I can’t make the label and surrounding border change color once the checkbox (hidden or display: none at this point) is selected.

    Code currently looks like this:

    span.wpcf7-list-item {
    display: inline-block;
    margin: 0 0 15px 0;
}

.wpcf7-list-item {
    margin: 0 0 20px 1em;
    border: 1px solid #f26922;
    border-radius: 40px;
    text-transform: uppercase;
    font-size: 16px;
    padding: 10px;
    width: 100%;
}

    I thought adding the following code would achieve what I was looking for, but it did nothing:

    input[type=checkbox]:checked + label {
    background-color: #f26922;
    color: #333333;
    border-color: #333333;
}

    Any help in this would be tremendously appreciated!!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Katie H.

    (@khrycak)

    If you want checkboxes to look like buttons, you are most likely using checkboxes incorrectly. Checkboxes, radio buttons, and website buttons have separate, distinct functions, and should follow visual standards.

    Checkboxes are used when you have a list of options and the user can select multiple choices. Radio buttons are used when there is a list of two or more options and the user must select exactly one choice. Buttons visually signify the ability to click an option and be linked to somewhere else.

    Instead of changing the CSS of a checkbox, I suggest revisiting whether you should be using a checkbox, radio button, or text with a hyperlink (instead of a button) on your specific form. Then styling its normal visual standard to match your site.

    For further information:
    Contact Form 7 – Checkboxes, Radio Buttons/
    Contact Form 7 – Submit Button/
    How to Design Better Buttons

    • This reply was modified 6 years ago by Katie H.. Reason: grammar errors
    Thread Starter arodriguez92

    (@arodriguez92)

    Thank you for the response. I am aware of the difference between check boxes, radio buttons, and regular buttons. I still wish to design the check boxes to ‘look’ like buttons while still behaving like a checkbox.

    I would like to know the same thing, to use for a choice like Car, SUV or Truck etc nice big buttons.

    I need the data/choice recorded and sent in the email, a button doesn’t capture the data.

    I have the same question, but for radio buttons. Have you found a solution?

    Thread Starter arodriguez92

    (@arodriguez92)

    I never received a response or figured out how to do this, unfortunately. I eventually had to style my checkboxes while still making them look like check boxes. Very unfortunate no one was able to offer any assistance here ?? If these had been hand coded check boxes it would have been doable, but the fact that their CF7 makes it so much harder! If there’s a way to do it, I don’t know, sorry!

    Gotcha! Thanks for the update ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Style Checkboxes to look like Buttons?’ is closed to new replies.