CODEWITHSUNDEEP
htmlcsswordpressradio-buttoncontact-form-7
Matthew Johnston
Matthew Johnston

Reputation: 25

Styling Contact Form 7 Radio Buttons

I'm trying to style radio buttons generated by the Contact Form 7 plugin for WordPress. All the examples I've seen have relied on having a label with a for="" parameter on them like this:

<input type="radio" id="this-button" name="test-button">
<label for="this-button">Click Me</label>

But the buttons generated by CF7 don't allow you to add that for="" parameter. It looks like this on the page:

<label>
    <span class="wpcf7-list-item-label">Yes</span>
    <input type="radio" id="yes" name="yes-button" value="Yes">
</label>

I still need to have custom radio buttons, but is there another way to do it that doesn't rely on the for="" parameter? jQuery is being loaded on the page already, so I can use a jQuery solution.

Any help would be great, I've tried several solutions with no luck.

Upvotes: 1

Views: 8804

Answers (2)

Matthew Johnston
Matthew Johnston

Reputation: 25

Here's what ended up working for me:

I installed "Checkator", then added this:

//Add "checkator" class
$( document ).ready(function() {
    $(".my-page label > input").addClass("checkator");
});

...at the top of fm.checkator.jquery.js to add the "checkator" CSS class to the radio buttons.

Manually applying the CSS class to the radio buttons allowed Checkator to find them, and from there I was able to style them as needed.

Upvotes: 1

Robster
Robster

Reputation: 222

have you tried adding a class to one of the radio buttons similar to: 

   <label class="container">One
   <input type="checkbox" checked="checked">
   <span class="checkmark"></span>
   </label>

You should be able to add custom classes even through wordpress or get a CSS plugin to let you add custom CSS.

https://www.w3schools.com/howto/howto_css_custom_checkbox.asp is a great resource.

-Robert

Upvotes: 0

Related Questions