It looks like when checkbox is wrapped by a label element, we can still toggle it even if we have set the display property to none.
label input {
display: none;
}
label span.y {
display: none;
}
label span.n {
display: inline;
}
label input:checked~span.y {
display: inline;
}
label input:checked~span.n {
display: none;
}
<label>
<input type="checkbox">
<span class="y">Checked!</span>
<span class="n">Click me!</span>
</label>
it confuses me a lot, i'll appreciate it if you can explain it for me
as per on w3cschool - label provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control.
Related
I'd like to create a collapsible button highlighted as href for my academic website, and got an answer here: HTML Collapsible Button - How to highlight the button as href?
However, when I create more than one buttons, the top button opens all the hidden texts (please see my code below). Could I modify the code so that each button only opens the hidden text just below it, or opens a specified hidden text?
CSS:
label {
color: blue;
}
label:hover {
text-decoration: underline;
cursor: pointer; }
#hidden {
display: none;
}
:checked~#hidden {
display: block;
}
Html:
<input type="checkbox" id="my_checkbox" style="display:none;">1st paper title.
<label for="my_checkbox">Abstract</label>
<div id="hidden">1st abstract</div>
<br>
<input type="checkbox" id="my_checkbox2" style="display:none;">2nd paper title.
<label for="my_checkbox2">Abstract</label>
<div id="hidden">2nd abstract</div>
The same id can be used one time per page. So we have to use class instead of id. Also we should use Adjacent sibling combinator instead of General sibling combinator
label {
color: blue;
}
label:hover {
text-decoration: underline;
cursor: pointer; }
.hidden {
display: none;
}
input:checked+label+.hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">1st paper title.
<label for="my_checkbox">Abstract</label>
<div class="hidden">1st abstract</div>
<br>
<input type="checkbox" id="my_checkbox2" style="display:none;">2nd paper title.
<label for="my_checkbox2">Abstract</label>
<div class="hidden">2nd abstract</div>
Yes, provided the HTML structure is reliable and consistent.
Change:
:checked~#hidden {
display: block;
}
to
:checked + label + #hidden {
display: block;
}
However, you can't have multiple items with the same id attriubte - use a class instead.
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>
I have a simple html/css toggle set up
#toggle1 {
display: none;
}
#toggle1:target {
display: block;
}
#toggle2 {
display: none;
}
#toggle2:target {
display: block;
}
Show1<br />
Show2
<p id="toggle1">1</p>
<p id="toggle2">2</p>
This works as desired by showing and hiding. However I want the initial paragraph to be visible upon page load. If I remove the #toggle1 {display: none;} it does not work properly.
Any assistance would be most helpful and appreciated.
Thanks in advance.
This is just a bit of a hack, but if you reverse the order of the hidden elements, add display:block to the "default" one and then add display:none to :target ~ #toggle1 it should simulate a default selected item:
#toggle1, #toggle1:target, #toggle2:target {
display: block;
}
:target ~ #toggle1, #toggle2 {
display: none;
}
Show1<br />
Show2
<p id="toggle2">2</p>
<p id="toggle1">1</p>
I'm having a CSS issue where the radio button and label are appearing on different lines if the label spans multiple lines. Here is an example:
() Option A
() Option B
()
Option C is really long so it
will span two lines
() Option D
See how the long lines are breaking after the radio option? The long label-body should span two lines, but it should be inline with the radio option such as:
() Option C is really long so it
will span two lines
Here's my CSS
input[type="radio"] {
display: inline;
margin-bottom: 0px; }
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal; }
And finally the HTML
<label>
<input type="radio"> <span class="label-body">Option A</span>
</label>
I can't seem to figure out why this is happening. If it helps, I'm using the Skeleton framework (http://getskeleton.com/).
Try removing the inline-block on the span.label-body, if possible. This sets the span in the same line as the radio button, because by default it is inline.
div {
width: 200px;
}
input[type="radio"] {
display: inline;
margin-bottom: 0px; }
label > .label-body {
margin-left: .5rem;
font-weight: normal;
}
span {
position:absolute;
width: 100px;
left: 30px;
}
<div>
<label>
<input type="radio"><span class="label-body">really long label that should span more than one line because it is really long</span>
</label>
</div>
I have custom checkboxes I styled like buttons. When you click the label or input the div around it changes color. However, only the label and input are clickable.
Is there a way to make the entire div/button clickable (i.e. everything inside the border)?
Here's my code:
div.label {
border:solid 1px gray;
line-height:40px;
height:40px;
width: 250px;
border-radius:40px;
-webkit-font-smoothing: antialiased;
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
color:gray;
text-align:center;
}
label {
display:inline;
text-align:center;
}
input[type=checkbox] {
display: none;
}
input:checked + div {
border: solid 1px red;
color: #F00;
}
input:checked + div:before {
content: "\2713";
}
<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<div class="label">
<label for="lists[Travel]">Travel</label> <br>
</div>
The answer is quite symple: you don't need an additional div-element. Actually you can place a label-element wherever you want and associate it with an input-element of your choice.
You do so by giving the input-element an id-attribute and associate the label-element with a corresponding for-attribute.
eg: <input id="my-input-id">[...]<label for="my-input-id">Label Text</label>)
A <label> can be associated with a control either by placing the control element inside the element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.
Labels are not themselves directly associated with forms. They are only indirectly associated with forms through the controls with which they're associated.
When a <label> is clicked or tapped, and it is associated with a form control, the resulting click event is also raised for the associated control.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
label {
display:block;
border:solid 1px gray;
line-height:40px;
height:40px;
width: 250px;
border-radius:40px;
-webkit-font-smoothing: antialiased;
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
color:gray;
text-align:center;
}
input[type=checkbox] {
display: none;
}
input:checked + label {
border: solid 1px red;
color: #F00;
}
input:checked + label:before {
content: "\2713 ";
}
/* new stuff */
.check {
visibility: hidden;
}
input:checked + label .check {
visibility: visible;
}
input.checkbox:checked + label:before {
content: "";
}
<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<label for="lists[Travel]">Travel with jump</label>
<!-- alternatively avoid jumps between text of state checked and unchecked -->
<input class="checkbox" id="lists[new]" type="checkbox" name="lists[new]" />
<label for="lists[new]"><span class="check">✓</span> Travel without jump</label>
In addition you can fiddle around with the display: block of the <label>.
But this should be quite simple by giving it float: left, display: inline-block or whatever to get the desired elements float.
CODEPEN
Here's a one way to achieve this:
<div onclick="this.querySelector('input[type=checkbox]').click()">
<input type="checkbox" style="pointer-events:none">
<span>Label</span>
</div>
Or if you give the checkbox an id:
<div onclick="abc.click()">
<input id="abc" type="checkbox" style="pointer-events:none">
<span>Label</span>
</div>
You need pointer-events:none in this appraoch because otherwise a double-click (causing check and uncheck) happens when you click on the checkbox directly.