为什么单选按钮 CSS 样式的行为与复选框相反？

【问题标题】：Why does radiobutton CSS-styling behave opposite to checkbox?为什么单选按钮 CSS 样式的行为与复选框相反？
【发布时间】：2014-08-15 22:40:59
【问题描述】：

问题：

我正在尝试使用纯 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>

，我想将其从复选框更改为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>

有趣的是，当使用单选按钮而不是复选框时，选中的 CSS 属性的行为似乎完全相反。

为什么？
有没有简单的方法来解决它？

编辑：
啊，我明白为什么了，它的行为实际上是一样的。
新问题：如何反转这个，比如 

ul li input[type=checkbox]:unchecked ~ p {

而不是

ul li input[type=checkbox]:checked ~ p {

【问题讨论】：

  • @Niet the Dark Absol：好得令人难以置信，在 IE11 中不起作用。
  • Works fine for me（警告：丑陋的小提琴XD）
  • @Niet the Dark Absol: 嗯，对，也许问题是 :not(:checked) 与 ~ p 的组合
  • 哦，有趣。那将是一个渲染错误。 IE 没有正确检测到它应该重绘p 标记。缩放可以解决它。不太确定该建议什么。
  • @Niet the Dark Absol：确实很有趣，缩放重绘。绝对是一个错误。提交到 connect.microsoft.com 的 IE 反馈论坛

标签： html css checkbox radio-button


【解决方案1】：

哦，酷，:not(:checked) 有效；)
谢谢@Niet the Dark Absol

编辑：
更正：适用于所有浏览器（使用 Chrome 和 Firefox 测试，最新稳定版本），除了 IE（使用 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>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2017-01-07
    • 2015-12-09
    • 1970-01-01
    • 2012-01-22
    • 2023-04-09
    • 2015-03-09
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode