复选框表单输入未显示在 Wordpress 网站上

Question

Web 开发的新手。我有一个 Wordpress 站点，我在其中使用父主题 Go 的子主题。作为我网站客户注册过程的一部分，我有一个带有 html 表单的页面，其中包含一个带有多个复选框输入的 'select all' 调查问题。我遇到了这些复选框未显示在表单中的问题。当我在浏览器中检查页面时 (Chrome)，我可以看到复选框在那里，只是没有出现。

这里是相关页面的 link： http://www.growopps.net/test/sign-up-3/

我在 html 的部分使用 CSS。我最近尝试在复选框输入周围放置一个边框，只是为了查看我的复选框的任何 CSS 是否生效，但没有生效；这是页面的代码：

<?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>

我在 Wordpress 仪表板上添加了以下额外的 css，但问题仍然存在：

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

我也尝试添加这个问题中讨论的自定义 css：但也没有解决问题

我还要提到，这个问题似乎扩展到单选按钮，这是我在尝试通过更改输入类型进行故障排除时发现的。

有没有人运行以前遇到过类似的事情或者有任何我可以尝试解决这个问题的想法？

谢谢！

Answer 1

在样式表“style-shared-min.css”的第 462 行，input[type=checkbox] 和 input[type-radio] 的不透明度都设置为 0。如果您删除此行，它们应该会显示。

编辑添加 - 在您提供的 CSS 中，添加以下不透明度规则：

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

只要此 CSS 在您网站上的 style-shared-min.css 文件之后加载，就可能不需要关于不透明度的重要标签。

Answer 2

请在您的<style>..</style>区块

中使用以下代码

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

复选框表单输入未显示在 Wordpress 网站上

Checkbox form input not displaying on Wordpress site

html

css

forms

wordpress

checkbox