Checkbox styling

  • I’ve created a check box and want to have the items listed in separate lines. I found a page on the support area that says to add “1
    span.wpcf7-list-item { display: block; }” to my theme’s stylesheet. I’m not a coder, so I’m struggling with this guidance. Where am I supposed to add/change the code? Nothing I’ve tried works.

    checkbox {
    display: block;
    min-height: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    vertical-align: middle;
    }
    .radio label,
    .checkbox label {
    display: inline;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    }
    .radio input[type=”radio”],
    .radio-inline input[type=”radio”],
    .checkbox input[type=”checkbox”],
    .checkbox-inline input[type=”checbox”] {
    float: left;
    margin-left: -20px;
    }
    .radio + .radio,
    .checkbox + .checkbox span.wpcf7-list-item {
    display: block
    margin-top: -5px;
    }
    .radio-inline,
    .checkbox-inline {
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer;

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 4 replies - 1 through 4 (of 4 total)

  • See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

    Thread Starter DonCHU

    (@donchu)

    Buzztone, thank you for replying, but as you can see from my original post, I already visited that page and got the code snippet(“span.wpcf7-list-item { display: block; }”). I’m not sure which file in my “theme” needs the snippet. Any chance you can point me to the right part of the code I need to update?

    If you include a link to your Contact Form 7 form here, others looking for a bit CSS styling practice may be able and willing to offer you a solution.

    The article I linked to is aimed only at people with ??suitable HTML & CSS skills and does not encourage copying and pasting code snippets without understanding what you are doing and why.

    Thread Starter DonCHU

    (@donchu)

    Thanks, I’m an entry-level coder at best and can work my way around a little bit of this stuff, but will take any guidance/feedback I can get.

    The form is located here:

    https://chu.edu/chu-fact-sheet/educational-outreach-form/

    The php template that I’m using is listed above in my original post. I don’t know where to add the suggested code snippet of “span.wpcf7-list-item { display: block; }”

    Any help is greatly appreciated!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Checkbox styling’ is closed to new replies.

Tags