CSS - How to remove text off a screen when a checkbox is selected-CodePudding

I want to remove text off the screen when a checkbox is selected using CSS. I want to know if there's a way of doing this through CSS. Here's some code

<form>
    <input id="check" type="checkbox">
</form>

<p> sample text </p>

How do I remove the sample text when the checkbox is selected. I want to achieve this by using CSS.

UPDATE It's not possible to do it through CSS, so can you tell me if there's a way to do this through JS.

CodePudding user response：

If you can change the HTML to

<form>
    <input id="check" type="checkbox">
    <p>sample text</p>
</form>

You could use adjacent sibling selector and the checked pseudo class.

/* Remove entire p */
input:checked   p { display:none; }

/* Resize the font to zero */
input:checked   p { font-size: 0; }

/* Indent the text so it is offscreen */
input:checked   p { text-indent: -9999px; }

CodePudding user response：

You can actually achieve this result if you are able to change your structure a bit. You will need to put input and p tag together in the same div so we can target them with CSS.

html:

    <form>
        <input id="check" type="checkbox">
        <p > sample text </p> 
    </form>

css:

input[type="checkbox"]:checked   p {
  display:none
}

CodePudding user response：

Here's a solution with JavaScript:

func = () => {
    if(document.querySelector("input").checked) {   
        document.querySelector("p").style.display = "none";
    } else {
        document.querySelector("p").style.display = "block";
    }
}

<form>
    <input id="check" type="checkbox" onchange="func()">
</form>
<p>Some Text</p>

CodePudding user response：

Make a little change in your HTML:

<form>
    <input id="check" type="checkbox">
    <p id="home"> sample text </p>  <!-- added an id to the p tag -->
</form>

Create a JavaScript file, lets say 'main.js', inside write the code:

function change() {
    var decider = document.getElementById('check');
    if(decider.checked){
        document.getElementById('home').innerHTML = "";
    }
}

Add a script tag to link your JS file to the HTML:

<script type="text/javascript" src="main.js"></script>