当一个单选按钮被 Select 编辑时，不能 Select 另一个单选按钮

Question

我正在使用单选按钮破解 CSS-only 选项卡，但最近我遇到了一个问题，当一个单选按钮被选中时，其他的 none 可能被选中。当我将鼠标悬停在标签上时，它甚至不会改变背景颜色，就像我在 CSS.

中指定的那样

相关代码如下：

<style>
.content-wrap{
display: none;
position: absolute;
top: 80px;
left: 0;
width: 100%;
height: calc(100% - 80px);
overflow-y: auto;
}
#main-wrap label{
display: block;
width: 48px;
height: 48px;
}
#main-wrap input[type=radio]{

}
#main-wrap [id^="tab"]:checked + label {
background-color: #404040;
}
#tab1:checked ~ #content-history,
#tab2:checked ~ #content-outline,
#tab3:checked ~ #content-edit,
#tab4:checked ~ #content-revise {
display: block;
}
</style>
<div id='main-wrap'>

            <input type='radio' name='main-wrap' id='tab1' value=''><label for='tab1' class='metro-icon'>
            <img src="https://maxcdn.icons8.com/windows10/PNG/64/Time_And_Date/hourglass-64.png" title="Hourglass" width="24">
            </label>

            <input type='radio' name='main-wrap' id='tab2' value=''>
            <label for='tab2' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Programming/outline-64.png" title="Outline" width="24">
            </label>

            <input type='radio' name='main-wrap' id='tab3' value=''>
            <label for='tab3' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Editing/pencil_tip-64.png" title="Pencil Tip" width="24">
            </label>

            <input type='radio' name='main-wrap' id='tab4' value=''>
            <label for='tab4' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Files/edit_file-64.png" title="Edit File" width="24">
            </label>

            <div class='content-wrap' id='content-history'>
                <div class='main'>
                <p>This is the history tab!</p>
                </div>
            </div>

            <div class='content-wrap' id='content-outline'>
                <div class='main'>
                <p>This is the outline tab!</p>
                </div>
            </div>

            <div class='content-wrap' id='content-edit'>
                <div class='main'>
                <div contenteditable id='main-input'>This is the edit tab!</div>
                </div>
            </div>

            <div class='content-wrap' id='content-revise'>
                <div class='main'>
                <p>This is the revise tab!</p>
                </div>
            </div>
</div>

我错过了什么？

Answer 1

问题是您的 .content-wrap 位于其余单选按钮之上，因此您无法按下它们。

只需删除 height: calc(100% - 80px);，您就可以标记其余的单选按钮。

此外，更改 left 属性，因为如果不这样做，您将在第二个单选按钮上方显示文本，因此它永远不会被选中。

.content-wrap{
display: none;
position: absolute;
top: 80px;
left: 100px;
width: 100%;
overflow-y: auto;
}
#main-wrap label{
display: block;
width: 48px;
height: 48px;
}
#main-wrap input[type=radio]{

}
#main-wrap [id^="tab"]:checked + label {
background-color: #404040;
}
#tab1:checked ~ #content-history,
#tab2:checked ~ #content-outline,
#tab3:checked ~ #content-edit,
#tab4:checked ~ #content-revise {
display: block;
}

<div id='main-wrap'>

            <input type='radio' name='main-wrap' id='tab1' value=''><label for='tab1' class='metro-icon'>
            <img src="https://maxcdn.icons8.com/windows10/PNG/64/Time_And_Date/hourglass-64.png" title="Hourglass" width="24">
            </label>

            <input type='radio' name='main-wrap' id='tab2' value=''>
            <label for='tab2' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Programming/outline-64.png" title="Outline" width="24">
            </label>

            <input type='radio' name='main-wrap' id='tab3' value=''>
            <label for='tab3' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Editing/pencil_tip-64.png" title="Pencil Tip" width="24">
            </label>

            <input type='radio' name='main-wrap' id='tab4' value=''>
            <label for='tab4' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Files/edit_file-64.png" title="Edit File" width="24">
            </label>

            <div class='content-wrap' id='content-history'>
                <div class='main'>
                <p>This is the history tab!</p>
                </div>
            </div>

            <div class='content-wrap' id='content-outline'>
                <div class='main'>
                <p>This is the outline tab!</p>
                </div>
            </div>

            <div class='content-wrap' id='content-edit'>
                <div class='main'>
                <div contenteditable id='main-input'>This is the edit tab!</div>
                </div>
            </div>

            <div class='content-wrap' id='content-revise'>
                <div class='main'>
                <p>This is the revise tab!</p>
                </div>
            </div>
</div>

Answer 2

请从此样式中删除 display: block

#tab1:checked  #content-history,
#tab2:checked ~ #content-outline,
#tab3:checked ~ #content-edit,
#tab4:checked ~ #content-revise {
display: block;
}

Answer 3

<style>
.content-wrap{
display: none;
position: absolute;
top: 80px;
left: 0;
width: 100%;

overflow-y: auto;
}
#main-wrap label{
display: block;
width: 40px;
height: 40px;
}
#main-wrap input[type=radio]{

}
#main-wrap [id^="tab"]:checked + label {
background-color: #404040;
}
#tab1:checked ~ #content-history,
#tab2:checked ~ #content-outline,
#tab3:checked ~ #content-edit,
#tab4:checked ~ #content-revise {
display: block;
}
</style>
<div id='main-wrap'>

            <input type='radio' name='main-wrap' id='tab1' value=''><label for='tab1' class='metro-icon'>
            <img src="https://maxcdn.icons8.com/windows10/PNG/64/Time_And_Date/hourglass-64.png" title="Hourglass" width="24">
            </label>

            <input type='radio' name='main-wrap' id='tab2' value=''>
            <label for='tab2' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Programming/outline-64.png" title="Outline" width="24">
            </label>

            <input type='radio' name='main-wrap' id='tab3' value=''>
            <label for='tab3' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Editing/pencil_tip-64.png" title="Pencil Tip" width="24">
            </label>

            <input type='radio' name='main-wrap' id='tab4' value=''>
            <label for='tab4' class='metro-icon'><img src="https://maxcdn.icons8.com/windows10/PNG/64/Files/edit_file-64.png" title="Edit File" width="24">
            </label>

            <div class='content-wrap' id='content-history'>
                <div class='main'>
                <p>This is the history tab!</p>
                </div>
            </div>

            <div class='content-wrap' id='content-outline'>
                <div class='main'>
                <p>This is the outline tab!</p>
                </div>
            </div>

            <div class='content-wrap' id='content-edit'>
                <div class='main'>
                <div contenteditable id='main-input'>This is the edit tab!</div>
                </div>
            </div>

            <div class='content-wrap' id='content-revise'>
                <div class='main'>
                <p>This is the revise tab!</p>
                </div>
            </div>
</div>

检查这个

Answer 4

使用这个css:

#main-wrap input[type=radio]{
    position:relative;
    z-index:999;
}

当一个单选按钮被 Select 编辑时，不能 Select 另一个单选按钮

Can't Select Another Radio Button When One Is Selected

html

css

label

input

radio-button