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!
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.