skip to Main Content

Total newbie to web development here. I have a WordPress site where I am using a child theme of the parent theme Go. As part of my site’s customer sign up process I have a page with an html form containing a ‘select all’ survey question with several checkbox inputs. I am experiencing an issue where these checkboxes are not displaying in the form. When I inspect the page in my browser (Chrome) I can see the checkboxes are there, just not appearing.

Here is a link to the page in question:
http://www.growopps.net/test/sign-up-3/

I am using CSS in the section of my html. I recently tried putting a border around the checkbox inputs just to see if any of my CSS for the checkboxes was taking effect, but it hasn’t; Here is the page’s code:

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package Go
 */

get_header();

// Start the Loop.
while ( have_posts() ) :
    the_post();
    get_template_part( 'partials/content', 'page' );

    // If comments are open or we have at least one comment, load up the comment template.
    if ( comments_open() || get_comments_number() ) {
        comments_template();
    }

endwhile;


?>
<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-image: url("http://growopps.net/test/wp-content/themes/go-child02/jar.png");
                background-size: cover;
            }
            
            div.container {
                margin-top: 150px;
                margin-bottom: 150px;
            }

            div.form_wrapper {
                width: 35%;
                margin: auto;
                padding: 20px 20px 20px 20px;
                background-color: #f2f2f2;
            }
            
          **input[type="checkbox"] {
            display: inline !important;
            border: 1px solid black;
            }**
  </style>
    </head>
    <body>
        <div class = "container">
            <div class = "form_wrapper">
                <form action = "page-sign-up-2-script.php" method = "post">
                    <label for = "purchase">Among the following items, which have you purchased in the past 3 months? Select all that apply:</label>
                    <input type = "checkbox" id = "otc" name = "otc" value = "OTC Pain Relief"/>
                    <label for = "otc">OTC (over-the-counter) pain relief (i.e. Aspirin, Ibuprofen)</label>
                    <input type = "checkbox" id = "vitamins" name = "vitamins" value = "Vitamins"/>
                    <label for = "vitamins">Vitamins/Multivitamins</label>
                    <input type = "checkbox" id = "antacids" name = "antacids" value = "Antacids"/>
                    <label for = "antacids">Antacids/indigestion relief</label>
                    <input type = "checkbox" id = "thc" name = "thc" value = "THC"/>
                    <label for = "thc">THC-containing cannabis products</label>
                    <input type = "checkbox" id = "protein" name = "protein" value = "protein"/>
                    <label for = "protein">Protein supplements (i.e. whey protein powder)</label>
                    <input type = "checkbox" id = "topical_pain " name = "topical_pain" value = "Topical pain relief"/>
                    <label for = "topical_pain">Topical pain relief (i.e. Icy Hot, lidocain)</label>
                    <input type = "checkbox" id = "collagen" name = "collagen" value = "Collagen"/>
                    <label for = "collagen">Collagen supplements</label>
                    <input type = "checkbox" id = "cbd" name = "cbd" value = "CBD"/>
                    <label for = "cbd">CBD-containing, THC-free cannabis products</label>

                    <input type = "submit" class = "submit" value = "Next Page"/>
            </div>
        </div>
    </body>
    <div>
        <?
            get_footer();
        ?>
    </div>
</html>

I added the following additional css on the WordPress dashboard, but the issue is still present:

input[type="radio"], 
input[type="checkbox"] {
    display: inline !important;
        -webkit-appearance: checkbox !important;
}

I have also tried adding the custom css discussed within this question:
WordPress and woocommerce checkbox not visible
but it did not solve the issue either.

I’ll also mention that this issue seems to extend to radio buttons, which I discovered when trying to troubleshoot earlier by changing the input type.

Has anyone run into something similar before or have any ideas I can try in order to resolve this?

Thank you!

3

Answers


  1. On line 462 of your stylesheet "style-shared-min.css" the opacity is set to 0 for both input[type=checkbox] and input[type-radio]. If you remove this line, they should show up.

    Edited to add – In your CSS that you provided, add in the following rule for opacity:

    input[type="radio"], 
    input[type="checkbox"] {
        display: inline !important;
        -webkit-appearance: checkbox !important;
        opacity:100 !important;
    }
    

    The important tag on opacity may not be needed as long as this CSS is being loaded after the style-shared-min.css file on your site.

    Login or Signup to reply.
  2. Please use the following code in your <style>..</style> Block

    input[type="radio"], input[type="checkbox"] {
     
        height: 19px;
        opacity: 100;
        width: 20px;
        display: inline !important;
        -webkit-appearance: checkbox !important;
    }
    
    Login or Signup to reply.
  3. Adding the following code in WordPress > Appearance > Customise > Custom CSS just worked fine for me.

    Thanks a lot saved me a great bunch of time and frustration, thanks to all.

    input[type="radio"], 
    input[type="checkbox"] {
        display: inline !important;
        -webkit-appearance: checkbox !important;
        opacity:100 !important;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search