单选按钮内的复选框显示圆圈而不是勾号

Question

我打算创建两个单选按钮，第一个单选按钮将有 2 个复选框缩进。我已经创建了单选按钮和复选框。我打算只使用 CSS 来切换行为。

第一个问题：复选框使用与单选按钮相同的样式。 期望结果：复选框使用勾选，单选按钮使用点。

第二个问题：单击第二个单选按钮时无法禁用复选框。 期望结果：当第二个单选按钮被点击时，复选框被禁用，只有当第一个单选按钮被点击时，复选框才能被选中。

下面是我的代码。希望有人可以就此提出建议。
jsfiddle：https://jsfiddle.net/7cp0p1z0/

        <style>

        .control {
            font-size: 20px;
            position: relative;
            display: block;
            margin-bottom: 20px;
            padding-left: 60px;
            cursor: pointer;
            color: grey;

        }

        .control input {
            position: absolute;
            z-index: -1;
            opacity: 0;
        }

        .control__indicator {
            position: absolute;
            top: 2px;
            left: 0;
            width: 35px;
            height: 35px;
            background: white;
            border: 2px solid #014586;

        }
            .control--radio{
                padding-top:8px;

            }
            .control--checkbox{
                font-weight: bold;
                line-height: 23px;

            }

        .control--radio .control__indicator {
            border-radius: 50%;
        }

        .control--checkbox .control__indicator{
                border-radius: 5px;



            }


            /* Hover and focus states */
        .control:hover input ~ .control__indicator,
        .control input:focus ~ .control__indicator {
            background: white;
        }

        /* Checked state */
        .control input:checked ~ .control__indicator {
            background: #014586;
        }

        /* Hover state whilst checked */
        .control:hover input:not([disabled]):checked ~ .control__indicator,
        .control input:checked:focus ~ .control__indicator {
            background: #014586;
        }

        /* Disabled state */
        .control input:disabled ~ .control__indicator {
            pointer-events: none;
            opacity: .6;
            background: #e6e6e6;
        }

        /* Check mark */
        .control__indicator:after {
            position: absolute;
            display: none;
            content: '';
        }

        /* Show check mark */
        .control input:checked ~ .control__indicator:after {
            display: block;
        }

        /* Checkbox tick */
        .control--checkbox .control__indicator:after {
            top: 5px;
            left: 13px;
            width: 8px;
            height: 35px;
            transform: rotate(45deg);
            border: solid #fff;
            border-width: 0 3px 3px 0;
        }

        /* Disabled tick colour */
        .control--checkbox input:disabled ~ .control__indicator:after {
            border-color: #7b7b7b;
        }

        /* Radio button inner circle */
        .control--radio .control__indicator:after {
            top: 12px;
            left: 12px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #fff;
        }

        /* Disabled circle colour */
        .control--radio input:disabled ~ .control__indicator:after {
            background: #7b7b7b;
        }
        </style>



            <label class="control control--radio">Male
                <input type="radio" name="gender" />
                <div class="control__indicator"></div>

                    <label class="control control--checkbox">First checkbox<br>test
                <input type="checkbox" checked="checked"/>
                <div class="control__indicator"></div>
            </label>
            <label class="control control--checkbox">Second checkbox
                <input type="checkbox"/>
                <div class="control__indicator"></div>
            </label>



            </label>


            <label class="control control--radio">Female
                <input type="radio" name="gender"/>
                <div class="control__indicator"></div>
            </label>

Answer 1

对于刻度问题：您的 .control--checkbox .control__indicator:after 样式被您的 .control--radio .control__indicator:after 样式覆盖。更改它们的顺序或更改选择器的特异性。