I want to use the checkbox-trick to show my mobile navbar. Somehow the h1 isn't showin up even when the invisible checkbox is checked. What have I done wrong?
#label {
margin-left: auto;
margin-right: auto;
color: #000000;
font-size: 35px;
cursor: pointer;
width: 47px;
}
h1 {
display: none
}
#toggle {
display: none;
}
#toggle:checked + h1 {
display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">☰</label>
<input id="toggle" type="checkbox">
</div>
<h1>DEMO ELEMENT</h1>
You're using "+" which is a sibling CSS selector, but <h1> isn't a sibling of your checkbox. It's a sibling of the checkbox's parent container. You can have 3 ways to go about it.
First way: Make it the sibling of the input by placing it inside
#label {
margin-left: auto;
margin-right: auto;
color: #000000;
font-size: 35px;
cursor: pointer;
width: 47px;
}
h1 {
display: none
}
#toggle {
display: none;
}
#toggle:checked+h1 {
display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">☰</label>
<input id="toggle" type="checkbox">
<h1>DEMO ELEMENT</h1>
</div>
Second way: Make it the sibling of the input by taking the input out of the container
#label {
margin-left: auto;
margin-right: auto;
color: #000000;
font-size: 35px;
cursor: pointer;
width: 47px;
}
h1 {
display: none
}
#toggle {
display: none;
}
#toggle:checked + h1 {
display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">☰</label>
</div>
<input id="toggle" type="checkbox">
<h1>DEMO ELEMENT</h1>
Third way: Make use of javascript.
Related
Its very simply and I have looked at all these examples but still am not able to figure out what I am doing wrong!
I have created a custom checkbox, increased the size and style, and when it is clicked I want the letter "A" to appear in the box, but it simply will not respond, maybe a second pair of eyes will help me identify the problem.
below is my html and css:
.container {
position: relative;
cursor: pointer;
display: block;
input,
label {
display: inline-block;
}
input {
// opacity: 0;
position: absolute;
height: unset;
width: unset;
cursor: pointer;
}
label::before {
border: 1px solid #333;
content: "";
display: inline-block;
font: 16px/1em sans-serif;
height: 50px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 50px;
border-radius: 5px;
color: red;
font-size: 50px;
padding: 10px;
}
input[type="checkbox"]:checked + label::before {
content: "A"; //code for checked
}
}
<div class="container">
<div>
<label for="form_agreeTerms" class="required">Agree terms</label>
<input type="checkbox" id="form_agreeTerms" name="form[agreeTerms]" required="required" value="1">
</div>
</div>
Here it is in codepen
You using the + operator, which means "The next sibling element".
You must move the label to be after the checkbox.
<div class="container">
<div>
<input type="checkbox" id="form_agreeTerms" name="form[agreeTerms]" required="required" value="1">
<label for="form_agreeTerms" class="required">Agree terms</label>
</div>
</div>
I'm trying to create a menu with options inside. I'm using only CSS with checkbox and radio inputs.
By changing one of the options, I also want the menu to close. I tried this using label inside label, but it doesn't work.
My prototype code:
input {
display: none;
}
label {
cursor: pointer;
}
label span:hover {
font-weight: 600;
}
.opener .menu {
background-color: #f3f3f3;
display: flex;
flex-direction: column;
color: #4d4d4d;
padding: 12px 4px;
width: 270px;
}
#menu:checked~.opener .menu {
display: none;
}
#menu~.opener>span:nth-of-type(1) {
display: none;
}
#menu:~.opener>span:nth-of-type(2) {
display: block;
}
#menu:checked~.opener>span:nth-of-type(1) {
display: block;
}
#menu:checked~.opener>span:nth-of-type(2) {
display: none;
}
.box {
height: 50px;
width: 50px;
margin: 20px 0;
}
#red:checked~.box {
background-color: red;
}
#blue:checked~.box {
background-color: blue;
}
#green:checked~.box {
background-color: green;
}
<input id="menu" type="checkbox"></input>
<input id="red" type="radio" name="opcoes" checked></input>
<input id="blue" type="radio" name="opcoes"></input>
<input id="green" type="radio" name="opcoes"></input>
<label class="opener" for="menu"><span>Open</span><span>Close</span>
<div class="menu">
<label for="red"><span>red</span></label>
<label for="blue"><span>blue</span></label>
<label for="green"><span>green</span></label>
</div>
</label>
<div class="box"></div>
Or you can check here: https://codepen.io/anon/pen/JxzPKR
Is there a way to close the menu when you click on one of the options without JavaScript?
Sometimes, contrary to popular opinion, it's just more dev friendly to use Javascript.
There is too much conditional logic for this to be a pure CSS solution. There are ~3 if-then-else conditions you would have to satisfy, while keeping the styles cascading. I think the most arduous task to satisfy is that you have a toggle header, in addition to other controls toggling it.
This will inherently get more complex and convoluted the more components you add. But here is an example using :target. This is a work-around and provides a solution to the question at hand. You won't be able to 'toggle' the menu this way so I had to add the header under the elements so it can be accessed via some kind of sibling selector:
.menu {
position: relative;
width: 45%;
}
input[type="radio"] {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
a:any-link {
all: unset;
}
.menu-header {
position: absolute;
top: 0;
padding: 5px 10px;
color: white;
width: 100%;
background-color: cornflowerblue;
}
.menu-header a {
font-weight: bold;
cursor: pointer;
color: white;
font-size: 22px;
}
.menu-header .close {
display: none;
}
#menu-body {
display: none;
flex-flow: column nowrap;
position: absolute;
top: 34px;
background-color: rgba(220,220,220,1);
height: 100px;
color: black;
width: 100%;
padding: 10px;
}
.menu-header a,
#menu-body label {
cursor: pointer;
}
#menu-body:not(:target) {
display: none;
}
#menu-body:not(:target) + .menu-header > a:not(.close) {
display: inline-block;
}
#menu-body:target {
display: flex;
}
#menu-body:target + .menu-header > a {
display: none;
}
#menu-body:target + .menu-header > a.close {
display: inline-block;
}
<div class="menu">
<div id="menu-body">
<input id="red" type="radio" name="opcoes" checked/>
<label for="red">Red</label>
<input id="blue" type="radio" name="opcoes"/>
<label for="blue">Blue</label>
<input id="green" type="radio" name="opcoes"/>
<label for="green">Green</label>
</div>
<div class="menu-header">≡ Open≡ Close</div>
</div>
You should consider accessability using this method, or at minimum, how this effects site navigation.
Edit: A demo in regards to discussion in comments:
.menu {
position: relative;
width: 45%;
}
input[type="radio"] {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
a:any-link {
all: unset;
}
#menu-header {
position: absolute;
top: 0;
padding: 5px 10px;
color: white;
width: 100%;
background-color: cornflowerblue;
}
#menu-header a {
font-weight: bold;
cursor: pointer;
color: white;
font-size: 22px;
}
#menu-header .close {
display: none;
}
#menu-body {
display: none;
flex-flow: column nowrap;
position: absolute;
top: 34px;
background-color: rgba(220,220,220,1);
height: 100px;
color: black;
width: 100%;
padding: 10px;
}
.menu-header a,
#menu-body label {
cursor: pointer;
}
#menu-body:not(:target) {
display: none;
}
#menu-body:not(:target) ~ .menu-header > a:not(.close) {
display: inline-block;
}
#menu-body:target {
display: flex;
}
#menu-body:target ~ #menu-header > a {
display: none;
}
#menu-body:target ~ #menu-header > a.close {
display: inline-block;
}
#red:target ~ .box {
background-color: red;
}
#blue:target ~ .box {
background-color: blue;
}
#green:target ~ .box {
background-color: green;
}
.box {
background-color: black;
width: 75px; height : 75px;
}
<div class="menu">
<input id="red" type="radio" name="opcoes" checked/>
<input id="blue" type="radio" name="opcoes"/>
<input id="green" type="radio" name="opcoes"/>
<div id="menu-body">
Red
Blue
Green
</div>
<div class="box"></div>
<div id="menu-header">
≡ Open
≡ Close
</div>
</div>
I have to following HTML:
<div>
<input id="check" type="checkbox" />
<label for="check"><span>Test label</span></label>
</div>
I want to style a checkbox + label certain way. To do that, I use
input[type=checkbox] {
display: none;
}
to remove the checkbox, and then add a own custom box with:
input[type=checkbox] + label {
position: absolute;
border-radius: 2px;
background-color: #baccdc;
width: 21px;
height: 21px;
white-space: nowrap;
padding-left: 21px;
cursor: pointer;
}
So, this works fine in every browser. Now, however, I want to change the style on :hover like this:
input[type=checkbox]:hover + label {
background-color: green;
display: block;
}
This works in Chrome just after I clicked on the checkbox, and then, for a short amount of time, the :hover style appears.
In Firefox, this style always appears on :hover.
Here is a JSFiddle.
Is it a common Chrome problem or a mistake in my CSS?
input[type=checkbox] {
display: none;
}
label span {
display: block;
margin-left: 5px;
}
input[type=checkbox] + label {
position: absolute;
border-radius: 2px;
background-color: #baccdc;
width: 21px;
height: 21px;
white-space: nowrap;
padding-left: 21px;
cursor: pointer;
}
input[type=checkbox] + label:hover {
background-color: green;
display: block;
}
input[type=checkbox]:checked + label {
background-color: yellow;
display: block;
}
<div>
<input id="check" type="checkbox" />
<label for="check"><span>Test label</span></label>
</div>
Try putting the :hover effect on the label :
<div>
<input id="check" type="checkbox"/>
<label for="check"><span>Test label</span></label>
</div>
CSS:
input[type=checkbox] + label:hover
{
background-color: green;
display: block;
}
Here is a Demo for the same
It seems to have an issue with the display: none; state of the input.
Here's a workaround that works fine in Chrome too :
#groupInput label:hover {
background-color: green;
display: block;
}
Fiddle
Is there a way to hide a div with css only when you click a link. I'm making a popup that needs to be able to close when there is no JS. I've tried various methods but they have not worked when the button is inside the div that needs to hide.
when the button is inside the div that needs to hide.
Short answer: No, you can't achieve this when the button is inside the element. Thanks Joseph Marikle
However, you can achieve this when the button is outside the div.
#hide {
display: none;
}
label {
cursor: pointer;
text-decoration: underline;
}
#hide:checked ~ #randomDiv {
display: none;
}
<input type="checkbox" id="hide" />
<div id="randomDiv">
This is a div
<label for="hide">Hide div</label>
</div>
The following example hides the div when the checkbox is checked.
It uses the #closebutton ~ #targetdiv {... selector wich only works with its elements on this order. So the checkbox is placed inside of the main div on the layout but before of it on the code.
.main {
border-radius: 5px;
padding: 30px;
margin-bottom: 5px;
}
#A {
background: gold;
}
#B {
background: skyblue;
}
#C {
background: yellowgreen;
}
.close {
float: right;
margin-top: 30px;
margin-right: 75px;
height: 20px;
width: 20px;
}
.close:checked {
display: none;
}
.close:checked ~ #A, .close:checked ~ #B, .close:checked ~ #C {
display: none;
}
body {
overflow-y: scroll;
}
<div id=groupA><input class="close" type="checkbox">
<div id=A class=main>info A</div></div>
<div id=groupB><input class="close" type="checkbox">
<div id=B class=main>info B</div></div>
<div id=groupC><input class="close" type="checkbox">
<div id=C class=main>info C</div></div>
<html>
<head>
<style>
#hide{
z-index: 10000;
position: relative;
top: -54px;
padding: ;
width: 9%;
opacity: 0;
height: 22px;
}
#hide:checked~h2{
display: block;
}
h2{
display: none;
}
</style>
<title></title>
</head>
<body>
<h1>Click me</h1>
<input type="checkbox" id="hide" />
<h2>I'll appear when you click h1 !!!</h2>
</body>
</html>
The heading pretty much explains it. I have a couple of checkboxes inside a scrollable div. But for some reasons the 'background-color' attribute doesn't work. Although the 'margin-top' does seem to work...
Just puzzling me how one attribute can work and another not. It's also not like the div has it's own set of background color attributes that could potentially over ride the checkboxes attributes.
Anyways, below is my HTML (which is generated by JSP):
<div class="listContainer">
<input type="checkbox" class="oddRow">item1<br/>
<input type="checkbox" class="evenRow">item2<br/>
<input type="checkbox" class="oddRow">item3<br/>
<input type="checkbox" class="evenRow">item4<br/>
...
</div>
And here is my CSS:
.listContainer {
border:2px solid #ccc;
width:340px;
height: 225px;
overflow-y: scroll;
margin-top: 20px;
padding-left: 10px;
}
.oddRow {
margin-top: 5px;
background-color: #ffffff;
}
.evenRow{
margin-top: 5px;
background-color: #9FFF9D;
}
A checkbox does not have background color.
But to add the effect, you may wrap each checkbox with a div that has color:
<div class="evenRow">
<input type="checkbox" />
</div>
<div class="oddRow">
<input type="checkbox" />
</div>
<div class="evenRow">
<input type="checkbox" />
</div>
<div class="oddRow">
<input type="checkbox" />
</div>
In addition to the currently accepted answer: You can set border and background of a checkbox/radiobutton, but how it is rendered in the end depends on the browser. For example, if you set a red background on a checkbox
IE will show a red border instead
Opera will show a red background as intended
Firefox, Safari and Chrome will do nothing
This German language article compares a few browsers and explains at least the IE behavior. It maybe bit older (still including Netscape), but when you test around you'll notice that not much has changed. Another comparison can be found here.
You can use peseudo elements like this:
input[type=checkbox] {
width: 30px;
height: 30px;
margin-right: 8px;
cursor: pointer;
font-size: 27px;
}
input[type=checkbox]:after {
content: " ";
background-color: #9FFF9D;
display: inline-block;
visibility: visible;
}
input[type=checkbox]:checked:after {
content: "\2714";
}
<label>Checkbox label
<input type="checkbox">
</label>
After so much trouble i got it.
.purple_checkbox:after {
content: " ";
background-color: #5C2799;
display: inline-block;
visibility: visible;
}
.purple_checkbox:checked:after {
content: "\2714";
box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15);
border-radius: 3px;
height: 12px;
display: block;
width: 12px;
text-align: center;
font-size: 9px;
color: white;
}
<input type="checkbox" class="purple_checkbox">
It will be like this when checked with this code.
My solution
Initially posted here.
input[type="checkbox"] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background: lightgray;
height: 16px;
width: 16px;
border: 1px solid white;
}
input[type="checkbox"]:checked {
background: #2aa1c0;
}
input[type="checkbox"]:hover {
filter: brightness(90%);
}
input[type="checkbox"]:disabled {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}
input[type="checkbox"]:after {
content: '';
position: relative;
left: 40%;
top: 20%;
width: 15%;
height: 40%;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
display: none;
}
input[type="checkbox"]:checked:after {
display: block;
}
input[type="checkbox"]:disabled:after {
border-color: #7b7b7b;
}
<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>
2022 - there is a much better solution to this problem now
Just use the accent-color property and make sure you achieve proper contrast ratios for accessibility:
.blue-checkbox {
accent-color: #00eaff;
height: 30px; /* not needed */
width: 30px; /* not needed */
}
<input class="blue-checkbox" type="checkbox" />
We can provide background color from the css file. Try this one,
<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
width: 25px;
height: 25px;
background: gray;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
position: relative;
left: -5px;
top: -5px;
cursor: pointer;
}
input[type="checkbox"]:checked {
background: blue;
}
.checkbox-container {
position: absolute;
display: inline-block;
margin: 20px;
width: 25px;
height: 25px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="checkbox-container">
<input type="checkbox" />
</div>
</body>
</html>
The Best solution to change background checkbox color
input[type=checkbox] {
margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
}
input[type=checkbox]:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #ff0000;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 3px;
}
input[type=checkbox]:checked:after {
content: "✓";
font-size: 12px;
}
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a bus<br>
Improving another answer here
input[type=checkbox] {
cursor: pointer;
margin-right: 10px;
}
input[type=checkbox]:after {
content: " ";
background-color: lightgray;
display: inline-block;
position: relative;
top: -4px;
width: 24px;
height: 24px;
margin-right: 10px;
}
input[type=checkbox]:checked:after {
content: "\00a0\2714";
}
When you input the body tag, press space just one time without closing the tag and input bgcolor="red", just for instance. Then choose a diff color for your font.