【问题标题】:Wordpress how to hide a checkbox using CSSWordpress如何使用CSS隐藏复选框
【发布时间】:2021-09-10 01:56:25
【问题描述】:

我想从我的 Wordpress 博客上的 light/darkmode 切换隐藏默认复选框。 (使用 single.php)

我使用控制台检查了代码,并在预览中使用下面的代码调整了 CSS。

但是,当我保存并正确运行它时,我没有得到相同的结果。

input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
display: none !important;
}
            <section id="blog-post">
                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="col-10">
                        <div class="checkbox mt-3 text-right">
                            <input type="checkbox" id="darkSwitch">
                            <label for="darkSwitch"><i class="far fa-lightbulb fa-lg"><i>Light switch</i></i></label>
                        </div>   
                            <div class="row my-5 justify-content-center">
                                <div class="col-sm-12 col-md-10 col-lg-8 mt-3">                                    
                                    <h2 class="subheader mt-3">Lorem Ipsum Dolor Amet.</h2>
                                    <div class="dropcap">
                                        <pre></pre>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>This is italic text</em>, <strong>this is bold text</strong>, <em><strong>this is bold italic</strong></em> text. Donec justo massa, imperdiet ac efficitur sit amet, pretium a nunc. Aliquam sem nisi, sagittis a lacus ut, pulvinar molestie magna. Nam aliquam tincidunt erat nec pulvinar. Nullam urna nunc, cursus nec pharetra eu, euismod id dolor. Duis imperdiet, ante iaculis suscipit pharetra, mauris neque ultricies lacus, tincidunt posuere lectus ipsum ac est. Donec odio nunc, feugiat nec mi eget, faucibus euismod urna. Donec pretium sit amet leo eget auctor. Nulla consequat metus at ullamcorper faucibus. Donec ultricies tristique velit sit amet commodo. Morbi bibendum, nulla ut aliquam bibendum, ex lacus lacinia dui, quis sagittis justo neque vel mauris. Phasellus varius dapibus sapien, et euismod turpis. Praesent elit metus, posuere nec ipsum eget, ultricies lobortis massa.</p>
<p>Quisque ornare libero id nibh imperdiet ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fringilla urna in mauris consequat, eget lobortis elit sodales. Curabitur ipsum ligula, tincidunt eu venenatis quis, ullamcorper et nunc. Sed in hendrerit felis, eu fermentum mauris. In varius non urna at ullamcorper. Duis at arcu nibh. Vivamus et elementum purus. Nulla a tellus dapibus, tristique libero ut, porta odio. Nulla luctus aliquet tempus. Pellentesque ultrices finibus turpis, non vestibulum metus.</p>

【问题讨论】:

  • 如果某些 css 覆盖了您的代码,您是否检查过浏览器控制台?
  • 谢谢@Sfili_86,我使用控制台检查了代码,并在预览中调整了 CSS 效果。但是,当我保存并正确运行它时,我没有得到相同的结果。 (更新的 CSS 代码有问题。)

标签: css wordpress checkbox wordpress-theming custom-wordpress-pages


【解决方案1】:

请尝试以下 css 规则:

input[type='checkbox'], input[type='radio'] {
    display: none !important;
    visibility: hidden !important;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-07-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-27
    • 1970-01-01
    • 1970-01-01
    • 2013-08-10
    相关资源
    最近更新 更多