WordPress.org

Forums

Contact Form 7
[resolved] Different list styles for radio buttons and check boxes (5 posts)

  1. BobEmmDot
    Member
    Posted 9 months ago #

    I'm having an issues with styling check boxes and radio buttons when they're placed in a list. I've seen (and applied) the 'display:block' fix to the css, which is great - but I only want to apply that to checkboxes, and leave the radio buttons as they are. (See http://dev.bobmurison.co.uk/contact/career-choices-evaluation/ - I want to keep the yes/no radio buttons on the same line, but have the check boxes arrayed as a one-per-line list).

    Is there a way of adding a new class or changing the CSS for only one type of button?

    https://wordpress.org/plugins/contact-form-7/

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 9 months ago #

  3. BobEmmDot
    Member
    Posted 9 months ago #

    Thanks for your response. I added:

    .wpcf7 input[type="checkbox"]{
    margin-left: 0.5em;
    display: block;
    }

    ...to the style sheet, but it's putting the box and its label on different lines. How do I fix that? (Apologies, I'm a CSS novice)

  4. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 9 months ago #

    Add class option to the checkbox tags.

  5. BobEmmDot
    Member
    Posted 9 months ago #

    Great thanks.

Reply

You must log in to post.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic