close a div when a checkbox clicked with pure css - html

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

Related

HTML Collapsible Button - How to make div appear after button?

I am trying to make a collapsible button with pure HTML and CSS. Here is what I have:
#hidden {
display: none;
height: 100px;
background: red;
}
:checked+#hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>
This works. However, I want the hidden div to come after the button instead of before. When I move the div to after the checkbox label, it does not work.
How can I fix this ?
Thanks!
You want to use a different CSS selector. The below uses the General sibling combinator to target the div no matter its order with respect to the input element (so long as it follows it).
#hidden {
display: none;
height: 100px;
background: red;
}
:checked ~ #hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>
use negation instead of +, so that it will select all divs related to that class name
#hidden {
display: none;
height: 100px;
background: red;
}
:checked~#hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>

React and css for radio and label

I hate css, I really do. I think this one will be trivial for most of you so please help me with this one.
I would like to create a radiobutton which have to change the background color of the label it's in. Here's the code which obviously does not work:
js:
<div className="container">
<label className="check" htmlFor="id">
<input {...radio.input} name="radio" type="radio" id="id" />
</label>
</div>
and css:
.check {
background-color: green;
display: inline-block;
height: 34px;
position: relative;
width: 60px;
cursor: pointer;
}
.check input {
display:none;
}
input[type="radio"]:checked + .check {
background-color: blue;
}
.container {
margin: 0 auto;
}
The + selector in CSS selects the next element in the HTML. Doing input + label is not going to work because your input is wrapped in the label.
The easiest solution for this would be to apply a checked CSS class in react when the input is checked. The other option would be to place the label AFTER the input in your markup, but that will probably require you to apply more CSS to get the appearance you need.
I really love CSS, I really do! ;)
Change your HTML to:
<div className="container">
<input {...radio.input} name="radio" type="radio" id="id" />
<label className="check" htmlFor="id">
</label>
</div>
and style the radio button individually.

Why radio button in HTML in special division doesn't works?

I have two radio buttons which show/hide divs oh my website. The first radio button controls the visibility of a div. In this div I have another radio button which shows/hides another div. The first radio button works, but when I click on the second one nothing happens.
This is an example of my HTML and CSS code :
HTML :
<body>
<label for="a">B</label><input type="radio" id="a" name="a" value="1">
<div id="B">
<p>Div B</p>
<label for="c">D</label><input type="radio" id="c" name="c" value="1">
</div>
<div id="D">
<p>Div D</p>
</div>
</body>
CSS :
#B
{
float:left;
background-color: green;
width: 150px;
height: 50px;
display: none;
}
#D
{
float:right;
background-color: red;
width: 150px;
height: 50px;
display: none;
}
#a:checked ~ #B
{
display: block;
}
#c:checked ~ #D
{
display: block;
}
I don't understand why the second button does nothing.
Is there a solution without using JS?
Thank you,
As #showdev said, #c is not a sibling of #D so sibling selectors won't works in that case.
If you wants this to work with only CSS you have to change your structure or do this with javascript.
EDIT : I made it works with only CSS and HTML arrangement :
See this fiddle
HTML :
<body>
<label for="a">B</label><input type="radio" id="a" name="a" value="1">
<div id="B">
<p>Div B</p>
</div>
<label for="c">D</label><input type="radio" id="c" name="c" value="1">
<div id="D">
<p>Div D</p>
</div>
</body>
CSS that change :
#a:checked ~ #B
{
display: block;
}
#c:checked ~ #D
{
display: block;
}
label:nth-of-type(2), input:nth-of-type(2) { display: none; clear: both;}
#a:checked ~ label:nth-of-type(2), #a:checked ~ input:nth-of-type(2) {
display: block;
}
You should use javascript, unless you need a restricted solution that doesn't involves js at all.. You can easily solve your problem with an onClick function, like this:
<input type="radio" id="a" name="a" value="1" onclick="somefunctionA()">
<label for="c">D</label><input type="radio" id="c" name="c" value="1" onclick="somefunctionB()">
<script>
function somefunctionA(){
//do something!
}
function somefunctionB(){
//do something!
}
</script>

Styling the radio buttons

I want to style the checkboxes. I am able to do that using following HTML markup and CSS.
However the problem is that i have a bit different HTML markup, which I cannot change.
The reason for not being able to change is that it is generated by a plugin, so i will need to edit the core files to change that, which I do not want to do.
So how can I add same style to the HTML which I have below.
Working HTML:
<input type="radio" id="radio">
<label for="radio"></label>
Required HTML:
<li>
<input id="option-11" type="radio" value="11">
<label for="option-11">Option one</label>
</li>
As you can see that although the markup is similar, but in the above the label is used to display the text.
CSS:
input[type="radio"], input[type="checkbox"] {
display: none;
}
input[type="radio"] + label{
background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png');
padding:0;
display: inline-block;
width:20px;
height:20px;
}
input[type="radio"]:checked + label {
background:url('http://refundfx.com.au/uploads/image/checkbox_full.png');
}
Demo:
http://jsfiddle.net/JPSLm/
It works with your code, I don't know where the problem is.
http://jsfiddle.net/sGqsL/
HTML
<li>
<input type="radio" id="radio" name="radiogroup"/>
<label for="radio"></label>
</li>
and CSS
input[type="radio"], input[type="checkbox"] {
display: none;
}
input[type="radio"] + label{
background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png');
padding:0;
display: inline-block;
width:20px;
height:20px;
}
input[type="radio"]:checked + label {
background:url('http://refundfx.com.au/uploads/image/checkbox_full.png');
}
li {
list-style-type: none;
}

CSS - How to Style a Selected Radio Buttons Label?

I want to add a style to a radio button's selected label:
HTML:
<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label>
</div>
CSS
.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
background:Red;
border:1px solid green;
padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked {
background:pink !important;
}
Any ideas what I'm doing wrong?
.radio-toolbar input[type="radio"] {
display: none;
}
.radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<div class="radio-toolbar">
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">All</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Open</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Archived</label>
</div>
First of all, you probably want to add the name attribute on the radio buttons. Otherwise, they are not part of the same group, and multiple radio buttons can be checked.
Also, since I placed the labels as siblings (of the radio buttons), I had to use the id and for attributes to associate them together.
If you really want to put the checkboxes inside the label, try adding an extra span tag, eg.
HTML
<div class="radio-toolbar">
<label><input type="radio" value="all" checked><span>All</span></label>
<label><input type="radio" value="false"><span>Open</span></label>
<label><input type="radio" value="true"><span>Archived</span></label>
</div>
CSS
.radio-toolbar input[type="radio"]:checked ~ * {
background:pink !important;
}
That will set the backgrounds for all siblings of the selected radio button.
You are using an adjacent sibling selector (+) when the elements are not siblings. The label is the parent of the input, not it's sibling.
CSS has no way to select an element based on it's descendents (nor anything that follows it).
You'll need to look to JavaScript to solve this.
Alternatively, rearrange your markup:
<input id="foo"><label for="foo">…</label>
You can add a span to your html and css .
Here's an example from my code ...
HTML ( JSX ):
<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/>
<label for="radiostyle1"><span></span> am </label>
<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/>
<label for="radiostyle2"><span></span> pm </label>
CSS to make standard radio button vanish on screen and superimpose custom button image:
input[type="radio"] {
opacity:0;
}
input[type="radio"] + label {
font-size:1em;
text-transform: uppercase;
color: white ;
cursor: pointer;
margin:auto 15px auto auto;
}
input[type="radio"] + label span {
display:inline-block;
width:30px;
height:10px;
margin:1px 0px 0 -30px;
cursor:pointer;
border-radius: 20%;
}
input[type="radio"] + label span {
background-color: #FFFFFF
}
input[type="radio"]:checked + label span{
background-color: #660006;
}
Just use label:focus-within {} to style a label with a checked radio or checkbox.
Here's an accessible solution
label {
position: relative;
}
label input {
position: absolute;
opacity: 0;
}
label:focus-within {
outline: 1px solid orange;
}
<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label>
</div>
As TimStieffenhofer mentioned in their answer, the easiest way is to have the input field as a child of the label and use the :focus-within pseudo-class on the label.
If you want to hide your radio button and set the input to hidden or display none, that will no longer work.
The work around is to give the input field a z-index of -1 (or any z-index lower than the parent label).
As there is currently no CSS solution to style a parent, I use a simple jQuery one here to add a class to a label with checked input inside it.
$(document).on("change","input", function(){
$("label").removeClass("checkedlabel");
if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});
Don't forget to give the pre-checked input's label the class checkedlabel too