CODEWITHSUNDEEP
htmlcssinputradio-buttonlabel
szh
szh

Reputation: 166

Can't Select Another Radio Button When One Is Selected

I'm using radio buttons to hack CSS-only tabs, but recently I've had a problem where when one radio button is selected, none of the others can be. When I hover over the label, it doesn't even change background color, like I specified in CSS.

Here's the relevant code:

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

What am I missing?

Upvotes: 1

Views: 301

Answers (4)

kamal
kamal

Reputation: 24

Use this css:

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

Upvotes: 1

Suraj
Suraj

Reputation: 287

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

Check this

Upvotes: 0

RAJNIK PATEL
RAJNIK PATEL

Reputation: 1049

please remove display: block from this style

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

Upvotes: 0

Francisco Romero
Francisco Romero

Reputation: 13189

The problem is that your .content-wrap is above the rest of radio buttons so you cannot press them.

Just remove height: calc(100% - 80px); and you will be able to mark the rest of radio buttons.

Also, change the left property because if not you are displaying the text above the second radio button so it will never be checked.

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

Upvotes: 0

Related Questions