Is there a way to make the radio buttons in this group look and behave like the menu items (first item)?
.menu {
display: flex;
flex-direction: row;
border: 0px solid gray;
justify-content: space-around;
}
input[type="radio"] {
display: block;
background-color: blue;
border: 1px solid red;
align-items: center;
}
.item {
padding: 8px 23px;
}
.item:hover {
background-color: #e6e6e6;
}
.item.selected {
border-bottom: 3px solid #D6d6d6;
}
<div >
<div >
Item 1
</div>
<input type=radio name=group >
Item 2
</input>
<input type=radio name=group >
<label>Item 3</label>
</input>
<input type=radio name=group >
Item 4
</input>
<input type=radio name=group >
Item 5
</input>
</div>
CodePudding user response:
One way is to convert them into labels
.menu {
display: flex;
flex-direction: row;
border: 0px solid gray;
justify-content: space-around;
}
.menu > label {
display: block;
background-color: blue;
border: 1px solid red;
align-items: center;
}
.item {
padding: 8px 23px;
}
.item:hover {
background-color: #e6e6e6;
}
.menu > input
{
display: none;
}
.menu > input[type="radio"]:checked:nth-of-type(1) ~ label:nth-of-type(1),
.menu > input[type="radio"]:checked:nth-of-type(2) ~ label:nth-of-type(2),
.menu > input[type="radio"]:checked:nth-of-type(3) ~ label:nth-of-type(3),
.menu > input[type="radio"]:checked:nth-of-type(4) ~ label:nth-of-type(4),
.menu > input[type="radio"]:checked:nth-of-type(5) ~ label:nth-of-type(5)
{
border-bottom: 3px solid #D6d6d6;
}
<div >
<input id="menuitem1" type=radio name=group checked/>
<input id="menuitem2" type=radio name=group />
<input id="menuitem3" type=radio name=group />
<input id="menuitem4" type=radio name=group />
<input id="menuitem5" type=radio name=group />
<label for="menuitem1">
Item 1
</label>
<label for="menuitem2">
Item 2
</label>
<label for="menuitem3">
Item 3
</label>
<label for="menuitem4">
Item 4
</label>
<label for="menuitem5">
Item 5
</label>
</div>
CodePudding user response:
something like that... ?
nav input[type=radio]
{
display : none;
}
nav span
{
display : inline-block;
border-bottom : 4px solid transparent;
padding : 3px 7px;
}
nav span:hover
{
background-color : #e6e6e6;
}
nav input[type=radio]:checked span
{
border-bottom-color: darkslategray;
}
<nav>
<label>
<input type="radio" name=group value="I1" checked >
<span>Item 1</span>
</label>
<label>
<input type="radio" name=group value="I2">
<span>Item 2</span>
</label>
<label>
<input type="radio" name=group value="I3">
<span>Item 3</span>
</label>
<label>
<input type="radio" name=group value="I4">
<span>Item 4</span>
</label>
<label>
<input type="radio" name=group value="I5">
<span>Item 5</span>
</label>
</nav>