為什么單選按鈕CSS樣式與復選框相反？
[英]Why does radiobutton CSS-styling behave opposite to checkbox?
問題描述
題：
我正在嘗試使用純CSS手風琴。
我以這個樣本為起點：
http://codepen.io/abergin/pen/ihlDf
這是我從示例中提取的html（我將復選框的不透明度更改為1，以更清楚地演示它）：
<!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>
我想將其從復選框更改為單選按鈕，以便在選擇其他標題時折疊其他菜單。
因此，這是將文本框更改為單選按鈕后的結果：
<!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>
有趣的是，使用單選按鈕而不是復選框時，選中的CSS屬性的行為似乎完全相反。
為什么呢
有簡單的解決方法嗎？
編輯：
哎呀，我明白為什么，實際上它的行為是一樣的。
新問題：如何將其反轉，例如
ul li input[type=checkbox]:unchecked ~ p {
代替
ul li input[type=checkbox]:checked ~ p {
1 個解決方案
解決方案1
0 已采納 2014-06-25 12:07:29
哦，很酷，：not（：checked）有效;）
感謝@Niet the Dark Absol
編輯：
更正：在IE之外的所有瀏覽器（已測試過Chrome和Firefox，目前最新的穩定版本）中均可使用（已測試IE 11，當前最新的公共可用版本）。
IE瀏覽器存在渲染問題。
單擊后放大，它會正確重繪。 臭蟲。
<!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>
我的表單上的CSS樣式在Firefox上不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.