Question

我正在使用单选按钮来破解仅限CSS的标签，但最近我遇到了一个问题，即当选择一个单选按钮时，其他单选按钮都不能。当我将鼠标悬停在标签上时，它甚至不会改变背景颜色，就像我在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

使用此css：

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

Answer 2

问题是您的.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 3

请从此款式中删除display: block

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

Answer 4

<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>

检查

选择一个时无法选择另一个单选按钮

4 个答案: