Why does radiobutton CSS-styling behave opposite to checkbox?
Question
Question:
I'm trying to get a pure CSS-accordion to work.
I use this sample as a start:
http://codepen.io/abergin/pen/ihlDf
This is the html I extracted from the sample (I changed opacity of checkbox to 1, to demonstrate it more clearly):
<!DOCTYPE html>
<html class=''>
<head>
<title>Textbox-Test</title>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<style type="text/css" media="all">
.transition, p, ul li i:before, ul li i:after {
transition: all 0.25s ease-in-out;
}
.flipIn, h1, ul li {
animation: flipdown 0.5s ease both;
}
.no-select, h2 {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
width: 100%;
height: 100%;
perspective: 900;
overflow-y: scroll;
background-color: #dce7eb;
font-family: "Titillium Web", sans-serif;
color: rgba(48, 69, 92, 0.8);
}
body {
min-height: 0;
display: inline-block;
position: relative;
left: 50%;
margin: 90px 0;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
box-shadow: 0 10px 0 0 #ff6873 inset;
background-color: #fefffa;
max-width: 450px;
padding: 30px;
}
@media (max-width: 550px) {
body {
box-sizing: border-box;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
max-width: 100%;
min-height: 100%;
margin: 0;
left: 0;
}
}
h1, h2 {
color: #ff6873;
}
h1 {
text-transform: uppercase;
font-size: 36px;
line-height: 42px;
letter-spacing: 3px;
font-weight: 100;
}
h2 {
font-size: 26px;
line-height: 34px;
font-weight: 300;
letter-spacing: 1px;
display: block;
background-color: #fefffa;
margin: 0;
cursor: pointer;
}
p {
color: rgba(48, 69, 92, 0.8);
font-size: 17px;
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
opacity: 1;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
margin-top: 14px;
z-index: 2;
}
ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}
ul li {
position: relative;
padding: 0;
margin: 0;
padding-bottom: 4px;
padding-top: 18px;
border-top: 1px dotted #dce7eb;
}
ul li:nth-of-type(1) {
animation-delay: 0.5s;
}
ul li:nth-of-type(2) {
animation-delay: 0.75s;
}
ul li:nth-of-type(3) {
animation-delay: 1s;
}
ul li:last-of-type {
padding-bottom: 0;
}
ul li i {
position: absolute;
transform: translate(-6px, 0);
-webkit-transform: translate(-6px, 0);
margin-top: 16px;
right: 0;
}
ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #ff6873;
width: 3px;
height: 9px;
}
ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
-webkit-transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
-webkit-transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
}
ul li input[type=checkbox]:checked ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
-webkit-transform: translate(0, 50%);
}
ul li input[type=checkbox]:checked ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=checkbox]:checked ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
-webkit-transform: translate(-2px, 0) rotate(-45deg);
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
-webkit-transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
-webkit-transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
-webkit-transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
-webkit-transform-origin: top center;
-webkit-transform: rotateX(0deg);
}
}
</style>
</head>
<body>
<h1>CSS + HTML only Accordion Element</h1>
<ul>
<li>
<input id="lol" type="checkbox" />
<i></i>
<h2>Languages Used</h2>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p>
</li>
<li>
<input type="checkbox" checked="checked" />
<i></i>
<h2>How it Works</h2>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>
</li>
<li>
<input type="checkbox" checked="checked" />
<i></i>
<h2>Points of Interest</h2>
<p>By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>
</li>
</ul>
<script type="text/javascript" >
function lolol()
{
document.getElementById("lol").click();
}
</script>
<input type="button" value="check" onclick="lolol();"/>
<!--
<script style='display: none;'>
var __links = document.querySelectorAll('a');
function __linkClick(e)
{
parent.window.postMessage(this.href, '*');
};
for (var i = 0, l = __links.length; i < l; i++)
{
if (__links[i].getAttribute('target') == '_blank')
{
__links[i].addEventListener('click', __linkClick, false);
}
}
</script>
-->
</body>
</html>
And I wanted to change it from checkbox to radiobutton, so the others menus collapse when a different title is selected.
So this is the result after changing textbox to radiobutton:
<!DOCTYPE html>
<html class=''>
<head>
<title>Radiobutton-Test</title>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<style type="text/css" media="all">
.transition, p, ul li i:before, ul li i:after {
transition: all 0.25s ease-in-out;
}
.flipIn, h1, ul li {
animation: flipdown 0.5s ease both;
}
.no-select, h2 {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
width: 100%;
height: 100%;
perspective: 900;
overflow-y: scroll;
background-color: #dce7eb;
font-family: "Titillium Web", sans-serif;
color: rgba(48, 69, 92, 0.8);
}
body {
min-height: 0;
display: inline-block;
position: relative;
left: 50%;
margin: 90px 0;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
box-shadow: 0 10px 0 0 #ff6873 inset;
background-color: #fefffa;
max-width: 450px;
padding: 30px;
}
@media (max-width: 550px) {
body {
box-sizing: border-box;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
max-width: 100%;
min-height: 100%;
margin: 0;
left: 0;
}
}
h1, h2 {
color: #ff6873;
}
h1 {
text-transform: uppercase;
font-size: 36px;
line-height: 42px;
letter-spacing: 3px;
font-weight: 100;
}
h2 {
font-size: 26px;
line-height: 34px;
font-weight: 300;
letter-spacing: 1px;
display: block;
background-color: #fefffa;
margin: 0;
cursor: pointer;
}
p {
color: rgba(48, 69, 92, 0.8);
font-size: 17px;
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
opacity: 1;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
margin-top: 14px;
z-index: 2;
}
ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}
ul li {
position: relative;
padding: 0;
margin: 0;
padding-bottom: 4px;
padding-top: 18px;
border-top: 1px dotted #dce7eb;
}
ul li:nth-of-type(1) {
animation-delay: 0.5s;
}
ul li:nth-of-type(2) {
animation-delay: 0.75s;
}
ul li:nth-of-type(3) {
animation-delay: 1s;
}
ul li:last-of-type {
padding-bottom: 0;
}
ul li i {
position: absolute;
transform: translate(-6px, 0);
-webkit-transform: translate(-6px, 0);
margin-top: 16px;
right: 0;
}
ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #ff6873;
width: 3px;
height: 9px;
}
ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
-webkit-transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
-webkit-transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=radio] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
}
ul li input[type=radio]:checked ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
-webkit-transform: translate(0, 50%);
}
ul li input[type=radio]:checked ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=radio]:checked ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
-webkit-transform: translate(-2px, 0) rotate(-45deg);
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
-webkit-transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
-webkit-transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
-webkit-transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
-webkit-transform-origin: top center;
-webkit-transform: rotateX(0deg);
}
}
</style>
</head>
<body>
<h1>CSS + HTML only Accordion Element</h1>
<ul>
<li>
<input id="lol" type="radio" name="accord" checked="checked" />
<i></i>
<h2>Languages Used</h2>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p>
</li>
<li>
<input type="radio" name="accord" />
<i></i>
<h2>How it Works</h2>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the radio input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>
</li>
<li>
<input type="radio" name="accord" />
<i></i>
<h2>Points of Interest</h2>
<p>By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>
</li>
</ul>
<!--
<script type="text/javascript">
function lolol() {
document.getElementById("lol").click();
}
</script>
<input type="button" value="check" onclick="lolol();" />
<script style='display: none;'>
var __links = document.querySelectorAll('a');
function __linkClick(e)
{
parent.window.postMessage(this.href, '*');
};
for (var i = 0, l = __links.length; i < l; i++)
{
if (__links[i].getAttribute('target') == '_blank')
{
__links[i].addEventListener('click', __linkClick, false);
}
}
</script>
-->
</body>
</html>
The funny thing is, the checked CSS attribute seems to behave exactly opposite when using radiobutton as opposed to checkbox.
Why ?
Is there an easy way to fix it ?
Edit:
Argh, I see why, it actually behaves the same.
New question: How to invert this, like
ul li input[type=checkbox]:unchecked ~ p {
instead of
ul li input[type=checkbox]:checked ~ p {
1 answers
solution1
0 ACCPTED 2014-06-25 12:07:29
Oh cool, :not(:checked) works ;)
thanks @Niet the Dark Absol
Edit:
Correction: Works in all browsers (tested with Chrome & Firefox, latest stable version as of speaking) except IE (tested with IE 11, latest publicly available version as of speaking).
IE has a rendering problem there.
Zoom in after clicking, and it's correctly redrawn. BUG.
<!DOCTYPE html>
<html class=''>
<head>
<title>Radiobutton-Test</title>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<style type="text/css" media="all">
.transition, p, ul li i:before, ul li i:after {
transition: all 0.25s ease-in-out;
}
.flipIn, h1, ul li {
animation: flipdown 0.5s ease both;
}
.no-select, h2 {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
width: 100%;
height: 100%;
perspective: 900;
overflow-y: scroll;
background-color: #dce7eb;
font-family: "Titillium Web", sans-serif;
color: rgba(48, 69, 92, 0.8);
}
body {
min-height: 0;
display: inline-block;
position: relative;
left: 50%;
margin: 90px 0;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
box-shadow: 0 10px 0 0 #ff6873 inset;
background-color: #fefffa;
max-width: 450px;
padding: 30px;
}
@media (max-width: 550px) {
body {
box-sizing: border-box;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
max-width: 100%;
min-height: 100%;
margin: 0;
left: 0;
}
}
h1, h2 {
color: #ff6873;
}
h1 {
text-transform: uppercase;
font-size: 36px;
line-height: 42px;
letter-spacing: 3px;
font-weight: 100;
}
h2 {
font-size: 26px;
line-height: 34px;
font-weight: 300;
letter-spacing: 1px;
display: block;
background-color: #fefffa;
margin: 0;
cursor: pointer;
}
p {
color: rgba(48, 69, 92, 0.8);
font-size: 17px;
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
opacity: 1;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
margin-top: 14px;
z-index: 2;
}
ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}
ul li {
position: relative;
padding: 0;
margin: 0;
padding-bottom: 4px;
padding-top: 18px;
border-top: 1px dotted #dce7eb;
}
ul li:nth-of-type(1) {
animation-delay: 0.5s;
}
ul li:nth-of-type(2) {
animation-delay: 0.75s;
}
ul li:nth-of-type(3) {
animation-delay: 1s;
}
ul li:last-of-type {
padding-bottom: 0;
}
ul li i {
position: absolute;
transform: translate(-6px, 0);
-webkit-transform: translate(-6px, 0);
margin-top: 16px;
right: 0;
}
ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #ff6873;
width: 3px;
height: 9px;
}
ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
-webkit-transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
-webkit-transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=radio] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 1;
}
ul li input[type=radio]:not(:checked) ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
-webkit-transform: translate(0, 50%);
}
ul li input[type=radio]:not(:checked) ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=radio]:not(:checked) ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
-webkit-transform: translate(-2px, 0) rotate(-45deg);
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
-webkit-transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
-webkit-transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
-webkit-transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
-webkit-transform-origin: top center;
-webkit-transform: rotateX(0deg);
}
}
</style>
</head>
<body>
<h1>CSS + HTML only Accordion Element</h1>
<ul>
<li>
<input id="lol" type="radio" name="accord" checked="checked" />
<i></i>
<h2>Languages Used</h2>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p>
</li>
<li>
<input type="radio" name="accord" />
<i></i>
<h2>How it Works</h2>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the radio input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>
</li>
<li>
<input type="radio" name="accord" />
<i></i>
<h2>Points of Interest</h2>
<p>By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>
</li>
</ul>
<!--
<script type="text/javascript">
function lolol() {
document.getElementById("lol").click();
}
</script>
<input type="button" value="check" onclick="lolol();" />
<script style='display: none;'>
var __links = document.querySelectorAll('a');
function __linkClick(e)
{
parent.window.postMessage(this.href, '*');
};
for (var i = 0, l = __links.length; i < l; i++)
{
if (__links[i].getAttribute('target') == '_blank')
{
__links[i].addEventListener('click', __linkClick, false);
}
}
</script>
-->
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS-styling on my form doesn't work on Firefox
Radiobutton styling with css
CSS margins: Why does this layout behave this way?
Styling checkbox using CSS
Foundation 6 CSS Checkbox Styling
Checkbox styling only css
HTML/CSS Styling Checkbox
Checkbox Styling based on CSS
CSS Checkbox Styling
How to force checkbox to behave like radiobutton, double loop
Related Tags