Wordpress how to hide a checkbox using CSS

Question

I would like to hide the default checkbox from my light/darkmode toggle featured on my Wordpress blog. (Using single.php)

I inspected the code using the console and adjusted the CSS using the code below in the preview which worked.

However, when I saved and ran it properly, I didn't get the same outcome.

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>

Have you check in your browser console if some css are overwriting your code? — law_81
– law_81, Commented Jan 27, 2021 at 16:14
Thank you @Sfili_86, I inspected the code using the console and adjusted the CSS in the preview which worked. However, when I saved and ran it properly, I didn't get the same outcome. (Updated CSS code in question.) — Tom
– Tom, Commented Jan 27, 2021 at 16:23

Ruvee · Accepted Answer · 2021-01-27 19:53:11Z

1

Try the following css rules instead:

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

answered Jan 27, 2021 at 19:53

Ruvee

9,1544 gold badges23 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Wordpress how to hide a checkbox using CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related