Applying CSS rules based on input checkbox status
I wrote a similar solution the other day, here.
Basically, you are limited when using the :checked
method. You are relying on the adjacent and general sibling combinators, +
, ~
. If the element isn't a general preceding sibling, it isn't going to work.
In this example, .expand
was not a preceding sibling. Therefore the solution is to place the input
element at the root of the document, and then use the selector input[name='panel']:checked ~ label .rotate
to change the .rotate
element. Note, that the general sibling combinator, ~
is now also being used as opposed to the adjacent sibling combinator, +
.
No need for JS - UPDATED EXAMPLE
Modified HTML:
<input type="checkbox" name="panel" class="hidden" id="panel"/>
<label for="panel">
Click Me
<div class="rotate">+</div>
</label>
<div class="expand">
Content goes here.
</div>
Updated CSS:
input[name='panel']:checked ~ label .rotate {
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
It's worth noting that I moved the transition properties to the .rotate
element too.
Can a checkbox be checked by default in the stylesheet, rather than in an HTML attribute?
A checkbox cannot be checked in CSS, unfortunately. It relies on the checked
attribute of the input
element, and attributes cannot be modified via CSS.
Alternatively, you could look into a JavaScript solution, but of course the best way would be to edit the HTML directly.
CSS checkbox input styling
With CSS 2 you can do this:
input[type='checkbox'] { ... }
This should be pretty widely supported by now. See support for browsers
How to style a checkbox using CSS
UPDATE:
The below answer references the state of things before widespread availability of CSS 3. In modern browsers (including Internet Explorer 9 and later) it is more straightforward to create checkbox replacements with your preferred styling, without using JavaScript.
Here are some useful links:
- Creating Custom Form Checkboxes with Just CSS
- Easy CSS Checkbox Generator
- Stuff You Can Do With The Checkbox Hack
- Implementing Custom Checkboxes and Radio Buttons with CSS3
- How to Style a Checkbox With CSS
It is worth noting that the fundamental issue has not changed. You still can't apply styles (borders, etc.) directly to the checkbox element and have those styles affect the display of the HTML checkbox. What has changed, however, is that it's now possible to hide the actual checkbox and replace it with a styled element of your own, using nothing but CSS. In particular, because CSS now has a widely supported :checked
selector, you can make your replacement correctly reflect the checked status of the box.
OLDER ANSWER
Here's a useful article about styling checkboxes. Basically, that writer found that it varies tremendously from browser to browser, and that many browsers always display the default checkbox no matter how you style it. So there really isn't an easy way.
It's not hard to imagine a workaround where you would use JavaScript to overlay an image on the checkbox and have clicks on that image cause the real checkbox to be checked. Users without JavaScript would see the default checkbox.
Edited to add: here's a nice script that does this for you; it hides the real checkbox element, replaces it with a styled span, and redirects the click events.
Checkbox Input column css rule always applied to element in the first row
Each input
must have an unique id
, and label for="that id"
. i.e.
<input id="E1" type="checkbox"><label for="E1">...</label>
<input id="E2" type="checkbox"><label for="E2">...</label>
Updated demo: https://jsfiddle.net/L7y0gzd2/2/
css styling when click on checkbox
You can play with HTML & css. Write Like this:
<input type="checkbox" id="change"/>
<div id="main">
<div id="content">
<label for="change"></label>
<h2>hello</h2>
</div>
</div>
CSS
#main{
width:100px;
height:100px;
background:red;
text-align:center;
}
input{
display:none;
}
input:checked ~ #main{
border:2px solid green;
font-size:24px;
background:yellow;
}
input:checked ~ #main label{
background:url(http://farm6.static.flickr.com/5182/5840005274_b3bcc52bb1_o.png);
}
label{
background:url(http://farm3.static.flickr.com/2793/5839457953_1690178a65_o.png);
display:block;
width:18px;
height:18px;
}
Check this http://jsfiddle.net/j5nTx/
Style a label based on checkbox check when both are wrapped in DIVs
Unfortunately, you cannot use CSS to style your label based on the state of your checkbox without changing your HTML. As of now, CSS selectors support child selectors and sibling selectors, but no selectors to style the child of one element based on the child of another element. You can find the whole list of CSS element combinators at: http://www.w3.org/TR/css3-selectors/#combinators.
Checkbox styling only css
The first thing you need to do with your code is add a label
, e.g.:
<form>
<input class="newsletter" type="checkbox" value="text" id="newsletter" name="newsletter">
<label for="newsletter">Ich möchte den Newsletter bekommen</label>
</form>
I've also added an id
and name
attribute to the checkbox. The id
needs to be the same as the for
attribute on the label
for this trick to work.
Next, we need to visibly hide the checkbox. I tend to use a class of sr-only
in the CSS to visibly hide things based on Yahoo's example:
.sr-only{
height: 1px;
width: 1px;
overflow: hidden
clip: rect(1px,1px,1px,1px);
position: absolute;
}
Next we create a pseudo element before
the label. For the style rules I'm using the adjacent sibling selector (+
) to apply the rules when the label is an adjacent sibling of the checkbox. I'm keeping your class name so it'll only target labels that're siblings of class newsletter
:
.newsletter:not(checked) + label:before{
content:" ";
display: inline-block;
width:13px;
height: 13px;
border: 2px solid black;
border-radius:3px;
}
The :not(checked)
means apply these rules when newsletter
is not checked.
To change the styles when newsletter
is checked
we change the background colour like this:
.newsletter:checked + label:before{
background-color:black;
}
This way clicking our pseudo checkbox or the text in the label will check the box (clicking the label at all sends focus to the field, so with a checkbox will check it).
How to change appearance of checkbox based on :checked, with no additional elements
input[type="checkbox"]:checked {border-radius: 2px;appearance:none;-webkit-appearance:none;-moz-appearance:none;width: 17px;height: 17px;cursor:pointer;position: relative;top: 5px;background-color:#409fd6;background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<div class="chk"> <label> CheckMe <input type="checkbox" id="myCheckBox"> </label></div>
Checkbox CSS :checked styling
You need to change all checked selectors to this:
input[type="checkbox"]:checked + .check-box-effect:before
label { display: inline-block; color: #fff; cursor: pointer; position: relative;}
label .check-box-effect { display: inline-block; position: relative; background-color: transparent; width: 25px; height: 25px; border: 2px solid #dcdcdc; border-radius: 10%;}
label .check-box-effect:before { content: ""; width: 0px; height: 2px; border-radius: 2px; background: #626262; position: absolute; transform: rotate(45deg); top: 13px; left: 9px; transition: width 50ms ease 50ms; transform-origin: 0% 0%;}
label .check-box-effect:after { content: ""; width: 0; height: 2px; border-radius: 2px; background: #626262; position: absolute; transform: rotate(305deg); top: 16px; left: 10px; transition: width 50ms ease; transform-origin: 0% 0%;}
label:hover .check-box-effect:before { width: 5px; transition: width 100ms ease;}
label:hover .check-box-effect:after { width: 10px; transition: width 150ms ease 100ms;}
input[type="checkbox"] { display: none;}
input[type="checkbox"]:checked + .check-box-effect { background-color: red !important; transform: scale(1.25);}
input[type="checkbox"]:checked + .check-box-effect:after { width: 10px; background: #333; transition: width 150ms ease 100ms;}
input[type="checkbox"]:checked + .check-box-effect:before { width: 5px; background: #333; transition: width 150ms ease 100ms;}
input[type="checkbox"]:checked:hover + .check-box-effect { background-color: #dcdcdc; transform: scale(1.25);}
input[type="checkbox"]:checked:hover + .check-box-effect:after { width: 10px; background: #333; transition: width 150ms ease 100ms;}
input[type="checkbox"]:checked:hover + .check-box-effect:before { width: 5px; background: #333; transition: width 150ms ease 100ms;}
<label> <input type="checkbox" id="chkProdTomove" /> <span class="check-box-effect"></span> </label>
Related Topics
Background Image in Styled Components React
Do You Put Ie Conditionals in The CSS File or in The HTML File
Why Backdrop Filter in Firefox Don't Work
Firefox Select Element Doubles Text-Indent Value
Setting Background Image of a Navigation Bar - Bootstrap
:Has Vs: Matches - Selectors Level 4
What Is .Htc File How It Works in Internet Explorer
Hide All Text Except for The First Letter with CSS
CSS3 Background-Size - How to Guarantee Coverage
CSS Start Repeating Background from Defined Position
Identify Browser and Os with CSS
Same Specificity, After Taking Placement into Consideration,: First-Letter Always Wins
Apply a Different CSS Width Property Based on Browser? (Ie8, Ff)