Filoweb.it

Elemento compare e scompare check (non funziona IE7 e IE8)

home menu Gallery Roberto contatti

CSS3 HTML5

Elemento compare e scompare check (non funziona IE7 e IE8)

 
		<!DOCTYPE html>

<html>

<head>

<meta http-equiv=" Content-Type"  content=" text/html;charset=UTF-8"  />

<title>Mostra/nascondi con i checkbox - Esempio 2 - CSS.HTML.it</title>

<style type=" text/css" >

html,body {

	width:100%;

	height:100%;

	margin:0;

	padding:0;

}

html {display:table;}

body {

	display:table-cell;

	vertical-align:middle;

}

#container {

	background: #e3e3e3;

	width:600px;

	margin:0 auto;

	padding: 20px;

	font-family: " Lucida Grande" , Verdana, Arial, sans-serif;

}

input#check {

 display:none; 

}

label[for=" check" ] {

 cursor: pointer;

 color: red;

}

#demo p {

 visibility: hidden;

}

input#check:checked ~ p {

  visibility: visible;

}

</style>

</head>

<body>

<div id=" container" >

<div id=" demo" >

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

<label for=" check" >Show me!</label>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</div>

</body>

</html>

↑
filoweb.it è il sito personale di Filippo Brunelli
(c) 2017 Filippo Brunelli
Le immagini ed i testi contenuti nel sito filoweb.it sono di proprietà di Filippo Brunelli salvo diversamente indicato.
L'uso delle immagini e del testo è gratuito per uso personale ed è subbordinato alla citazione della fonte.
Brunelli Filippo declina ogni responsabilità per l'uso che viene fatto delle informazioni presenti nel sito filoweb.it.

X

La tua privacy è importante
Utilizziamo, senza il tuo consenso, SOLO cookies necessari alla elaborazione di analisi statistiche e tecnici per l'utilizzo del sito. Chiudendo il Cookie Banner, mediante il simbolo "X" o negando il consenso, continuerai a navigare in assenza di cookie di profilazione. More info

Tutti
Cookie tecnici
I cookie tecnici sono necessari al fine di "effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica, o nella misura strettamente necessaria al fornitore di un servizio della società dell'informazione esplicitamente richiesto dal contraente o dall'utente a erogare tale servizio" (art. 122, comma 1 del Codice privacy).
Cookie analitici di terze parti
I cookie analytics sono utilizzati al fine di valutare l'efficacia di un servizio della società dell'informazione fornito da un titolare di un sito, per progettare un sito web o contribuire a misurare il "traffico" di un sito web, ovvero il numero di visitatori ripartiti per area geografica, fascia oraria della connessione o altre caratteristiche.
Cookie di profilazione
Sono cookie che creano profili personalizzati relativi all'utente per finalità di marketing, ad esempio il retargeting o advertising sui social network.