CODEWITHSUNDEEP
htmlcssradio-button
1.21 gigawatts
1.21 gigawatts

Reputation: 17820

Make a radio button look like a menu item

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 class="menu">
  <div class="item selected">
    Item 1
  </div>
  <input type=radio name=group class="item">
    Item 2
  </input>
  <input type=radio name=group class="item">
    <label>Item 3</label>
  </input>
  <input type=radio name=group class="item">
    Item 4
  </input>
  <input type=radio name=group class="item">
    Item 5
  </input>
 </div>

Upvotes: 0

Views: 864

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22353

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>

Upvotes: 2

vanowm
vanowm

Reputation: 10221

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 class="menu">
  <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 class="item" for="menuitem1">
    Item 1
  </label>
  <label class="item"  for="menuitem2">
    Item 2
  </label>
  <label class="item"  for="menuitem3">
    Item 3
  </label>
  <label class="item"  for="menuitem4">
    Item 4
  </label>
  <label class="item"  for="menuitem5">
    Item 5
  </label>
 </div>

Upvotes: 3

Related Questions