完全新手到网络开发在这里。我有一个WordPress网站，我正在使用父主题的子主题去。作为我的网站的客户注册过程的一部分，我有一个网页的html表单包含一个"全选"调查问题与几个复选框输入。我遇到了一个问题，这些复选框没有显示在表单中。当我在浏览器中检查页面（Chrome）我可以看到复选框在那里，只是没有出现。
下面是指向该页面的链接：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 Jmeter 板上添加了以下额外的css，但问题仍然存在：
input[type="radio"],
input[type="checkbox"] {
display: inline !important;
-webkit-appearance: checkbox !important;
}我也尝试过添加这个问题中讨论的自定义css：Wordpress and woocommerce checkbox not visible，但它也没有解决这个问题。
我还要提到，这个问题似乎扩展到了单选按钮，这是我在前面尝试通过更改输入类型进行故障排除时发现的。
以前有没有人遇到过类似的情况，或者有什么想法我可以尝试一下来解决这个问题？
谢谢大家!
3条答案
按热度按时间lbsnaicq1#
在样式表“style-shared-min.css”的第462行，input[type=checkbox]和input[type-radio]的不透明度都设置为0，如果删除这一行，它们应该会显示出来。
编辑添加-在您提供的CSS中，添加以下不透明度规则：
只要这个CSS是在style-shared-min.css文件之后加载到您的站点上的，就可能不需要关于不透明度的重要标记。
xam8gpfp2#
请在
<style>..</style>块中使用以下代码hgc7kmma3#
在Wordrepss --〉Appearance --〉Customise--〉CustomCSS中，添加下面的代码对我来说很好，非常感谢为我节省了大量的时间和挫折，感谢所有人。