Question

我必须使用来自一个站点的CSS技术来设置我的复选框样式。问题是样式化的复选框在我的网站中不起作用。然而，它正在处理下载的HTML演示。

CSS

<style>
input[type=checkbox].css-checkbox {
    position:absolute;
    z-index:-1000;
    left:-1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
    height: 28px;
    display: inline-block;
    line-height: 28px;
    background-repeat: no-repeat;
    cursor: pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -28px;
}
label.css-label {
    background-image: url(wp-content/uploads/2017/02/cb.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>

功能

<?php
function show_bank_terms() {
    $args = array("posts_per_page"   => 10, "post_type" => "fi_bank_search_terms", "order" => "DESC");
    $posts_array = get_posts($args);
    echo "<div class='list-grid'>";
    foreach($posts_array as $post){
        //$search_condition = get_post_meta($post->ID, "_fi_search_condition");
        $search_meta = fi_get_meta($post->ID, "_fi_search_condition");
        //var_dump($search_meta);
        $search_condition = "";
        if(count($search_meta) > 0)
            $search_condition = $search_meta[0]['meta_id'];
        ?>
        <div class="search_options">
            <input name="<?php echo $post->post_name; ?>" type="checkbox" id="<?php echo $post->post_name; ?>" class="css-checkbox" value="<?php echo $search_condition ?>" />
            <label for="checkboxG1" class="css-label" style="padding-left: 40px;"><?php echo $post->post_title; ?></label>
        </div>
        <?php
    }
?>

现在来自CSS，如果我从position: absolute;删除input[type=checkbox].css-checkbox，那么我可以看到样式旁边的实际复选框。它们完美地工作（检查点击）并且还反映了对样式复选框的检查。但是，当我直接点击样式复选框时，它不起作用。什么都没发生。我从昨天开始就被困住了。请帮忙。

Answer 1

在我看来，你的问题是标签'=“”不等于复选框的id =“”。你应该仔细检查一下。

这里的诀窍是标签链接到复选框，因此我们可以通过点击标签（for / id关系）来检查它。

复选框按钮无法在Wordpress中工作

1 个答案: