CSS checkbox hack with non-sibling content - html

The following CSS checkbox hack works under the assumption that the content is a sibling of the checkbox. When the label is clicked, the content is toggled.
DEMO
<input id="checkbox" type="checkbox" />
<label for="checkbox">
Toggle content
</label>
<div class="content">Content here</div>
#checkbox {
display: none;
}
#checkbox:not(:checked) ~ .content {
display: none;
}
Can the same effect be achieved using CSS only if the content is not a sibling of the checkbox? For example:
<div>
<input id="checkbox" type="checkbox" />
<label for="checkbox">
Toggle content
</label>
</div>
<div class="content">Content here</div>

You could do it with the :target pseudo class and using anchors instead of a checkbox. Ugly as hell but CSS only:
a {
color: #000000;
text-decoration: none;
}
#off {
display: none;
}
.content {
display: none;
}
#your-target:target ~ .content {
display: block;
}
#your-target:target #on {
display: none;
}
#your-target:target #off {
display: block;
}
<div id="your-target">
<a id="on" href="#your-target">
Toggle content
</a>
<a id="off" href="#">
Toggle content
</a>
</div>
<div class="content">Content here</div>

Related

Element used for input type file retaining hover state after click

I created a simple input type file placeholder like this:
input[type="file"] {
display: none;
}
.image .first {
display: none;
}
.image .second {
display: block;
}
.image:hover .first {
display: block;
}
.image:hover .second {
display: none;
}
<div class="image">
<input type="file" id="file-input" />
<label for="file-input">
<div class="first" style="height: 40px;background-color: red;"></div>
<div class="second" style="height: 40px;background-color: blue;"></div>
</label>
</div>
Whenever, I hover over the .image element I need to display .first and hide .second. This is happening successfully if I don't click on the file-input label.
However, when click on file-input label, the hover state persists(the red div shows) even after navigating away.
Here's a pen.

close a div when a checkbox clicked with pure css

I am trying to close a div when a checkbox is clicked with css only not JQuery or Javascript but it seems not working properly. How can I adjust it?
div[id^="div-"] {
display: block;
}
div[id^="div-"]:target {
display: none;
}
<input type="checkbox" checked>
<div id="div-1">
Here is the content.
</div>
How can I link the <a> click and the checkbox?
I think the only way to do this with pure css would be to have the checkbox as a direct sibling to the div:
#div-1 {display:none}
#checkbox:checked + #div-1 {display:block;}
<input id="checkbox" type="checkbox" checked>
<div id="div-1">
Here is the content.
</div>
#text{
width:100px;
height:100px;
background:black;
}
input[type=checkbox]:checked ~ #text{
display:none;
}
<input type="checkbox" name="check" value="checked">Click here<br>
<div id="text"></div>
Using only CSS you can do something like this.
JSFiddle
The + is the adjacent sibling selector, more info at https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors
#close + #div-1 {
display: none;
}
#close:checked + #div-1 {
display: initial;
}
<input id="close" type="checkbox" checked />
<div id="div-1">Here is the content.</div>
First you should remove the anchor and just let the input element because this trick that i'm showing needs elements in the same level or the second element be in lower levels of html structure.
<input type="checkbox" checked>
<div id="div-1">
Here is the content.
</div
css
div[id^="div-"] {
display: block;
}
input:checked ~ div[id^="div-"] {
display: none;
}
jsfiddle

Displaying div if radio button is checked

I have a radio button which id is someID-1 and a div which id is navi1.
<input name="nappi" type="radio" id="someID-1" />
<div>
<div id="navi1">
<div style="z-index:100;position:fixed;right:0;top:0;bottom:0;">
<label for="someID-2">2</label>
</div>
</div>
</div>
This CSS code works just fine:
div[id^="navi"] {
display: none;
}
But this does not work OK:
input#someID-1:checked #navi1 {
display: block;
}
How should I modify the code?
I have tens of radio buttons (id names between someID-1 and someID-99). I would like to have dynamic code.
I do not want to use JavaScript.
You can make like this. you can read the details of the selector that i used here
#navi1{
display: none;
}
input[type="radio"]#someID-1:checked + div #navi1{
display: block;
}
.box{
border: 1px solid #ddd;
width: 200px;
height: 200px;
text-align: center;
}
<input name="nappi" type="radio" id="someID-1" />
<div class="box">
<div id="navi1">
<div>
<label for="someID-2">2</label>
</div>
</div>
</div>
You need to navigate the document hierarchy correctly in your CSS. So this works:
div[id^="navi"]
{
display: none;
}
#someID-1:checked + div div {
display:block;
}

on click hide this (button link) pure css

my function is hide and show div with pure css but when i click open, the button still not disappear.
Open
<div id="show">
some text...
Close
</div>
and the css look like:
<style>
#show {display: none; }
#show:target { display: inline-block; }
#hide:target ~ #show { display: none; }
<style>
when i add this :
#show:target ~ #open { display: none; }
the button #open still not hiding
anyone can help me.
thanks before :)
You could solve it by putting your Open link inside the #show div
jsFiddle
HTML
<div id="show">
Open
<div id="content">
some text...
Close
</div>
</div>
CSS
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
The click functionality can be implemented using Checkbox for pure css. I modified your HTML as follows:
HTML
<input id="checkbox" type="checkbox" class="checkbox" />
<label id="open" for="checkbox" class="btn btn-default btn-sm"> <span class="show-text"></span>
</label>
<div id="show">some text...
<label for="checkbox" class="second-label btn btn-default btn-sm">Close</label>
</div>
CSS
:checked ~ .btn-default, #show, .checkbox {
display: none;
}
:checked ~ #show {
display: block;
}
.show-text:after {
content:"Open";
}
:checked + .show-text:after {
content:"";
}
.second-label, .show-text {
text-decoration: underline;
cursor: pointer;
}
Working Fiddle
Mr_Green Thank you for that code. I modified it for a responsive expanding menu on mobile devices
HTML
<input id="menu-toggle" type="checkbox" class="checkbox-toggle" />
<label id="open" for="menu-toggle" class="btn btn-default">Menu</label>
<div id="show">
Some Content
</div>
CSS
#media (max-width: 650px) {
input.checkbox-toggle + label {
display: block;
padding:.7em 0;
width:100%;
background:#bbbbbb;
cursor: pointer;
text-align:center;
color:white;
Text-transform:uppercase;
font-family:helvetica, san serif;
}
input.checkbox-toggle:checked + label {
background:#6a6a6a;
}
#show {
display: none;
}
input.checkbox-toggle:checked ~ #show {
display: block;
}
}
input.checkbox-toggle {
display: none;
}

CSS only tabs using input:checked

I found this example (the "checked" version) and it works:
http://jsfiddle.net/2cTwA/
But I want to wrap the input and labels inside a container element (like nav), and if I do that the tabs stop working :(
Is there any solution for this?
found solution: http://jsfiddle.net/2cTwA/7/
With a slight HTML and CSS modification - DEMO
CSS
input { display: none; }
nav { overflow: hidden }
label { float: left; display: inline-block; padding: 5px 10px; }
label a { color: #d33; text-decoration: underline; cursor: pointer; }
.tab { display: none; border: 1px solid #333; padding: 10px; }
a[name="tab1"] + .tab { display: block }
:target + .tab { display: block }
:target ~ a[name="tab1"] + .tab { display: none }
HTML
<section class="tab-area tabs-checked">
<nav>
<input checked type="radio" name="tab" id="tab-A" />
<input type="radio" name="tab" id="tab-B" />
<input type="radio" name="tab" id="tab-C" />
<label class="tab-link" for="tab-A">Tab 1</label>
<label class="tab-link" for="tab-B">Tab 2</label>
<label class="tab-link" for="tab-C">Tab 3</label>
</nav>
<a name="tab3"></a>
<article class="tab">
<h3>Tab 3</h3>
</article>
<a name="tab2"></a>
<article class="tab">
<h3>Tab 2</h3>
</article>
<a name="tab1"></a>
<article class="tab">
<h3>Tab 1.</h3>
</article>
</section>
You're using the sibling selector (~), and by using a containing element such as nav, you are removing the inputs and labels from being siblings of the articles.
You simply need to rewrite your css where you use the tilde.
here is the sass example for 12(max) tabs using CSS only
.tabs {
input[type=radio] {
display: none;
#for $i from 1 through 12 {
&:nth-of-type(#{$i}):checked ~ .content .tab:nth-child(#{$i}) {
display: block;
}
}
}
label {
cursor: pointer;
display: inline-block;
}
.tab {
display: none;
}
}
and here is the html markup
<div class="tabs">
<input name="controls" type="radio" id="controls-tab" checked="true"/>
<label for="controls-tab">controls</label>
<input name="controls" type="radio" id="panels-tab"/>
<label for="panels-tab">panels</label>
<input name="controls" type="radio" id="readme-tab"/>
<label for="readme-tab">readme</label>
<div class="content">
<div class="tab">
</div>
<div class="tab">
</div>
<div class="tab">
</div>
</div>
</div>
no need to relatively position tab divs inside content div. no need to set content height.