Creating a CSS HTML Toggle button-CodePudding

I saw this question has similar threads but none that match my needs. I'm creating a certain styled toggle button. I'm trying to have the "win" and "mac" containers chain to blue when they are selected. By default, "win" is the selected container so it's blue, but if "mac" is selected, mac will have the background of blue and "win" will be white. Hope you get it?

.main-box {
  border-style  : solid;
  border-color  : #008aff;
  border-width  : 1px;
  border-radius : 30px;
  }
.flex-container {
  display   : flex;
  flex-wrap : nowrap;
  }
.active>.btn1 {
  background-color : blue;
  }
.flex-container>.btn {
  width         : 70px;
  text-align    : center;
  line-height   : 25px;
  border-radius : 30px;
  font-size     : 20px;
  }

<div >
  <div >
    <div >Win</div>
    <div >Mac</div>
  </div>
</div>

CodePudding user response：

Use a checkbox and two <labels> associated to it by for attribute

Details are commented in example

.switch-box {
  /* reduces the overall width to the width of the content */
  width: max-content;
  border: solid #008aff 1px;
  border-radius: 30px;
}

#switch {
  /* Checkbox is hidden */
  display: none
}

.flex {
  display: flex;
  flex-wrap: nowrap;
}

.win {
  background-color: blue;
}

#switch:checked   div .mac {
  /* 
  When checkbox is checked, find the immediate <div> next to it then find
  label.mac inside of it and assign "blue" to it's background.
  */
  background-color: blue;
}

#switch:checked   div .win {
  /* 
  When checkbox is checked, find the immediate <div> next to it then find
  label.win inside of it and assign "white" to it's background.
  */
  background-color: white;
}

.btn {
  width: 70px;
  border-radius: 30px;
  font-size: 20px;
  line-height: 25px;
  text-align: center;
}

<div >
  <input id='switch' type='checkbox'>
  <div >
    <label for='switch' >Win</label>
    <label for='switch' >Mac</label>
  </div>
</div>

CodePudding user response：

The idea is to use radio buttons. There are plenty of examples on the web for example:

.form {
  padding: 20px;
}

.switch-field {
  display: flex;
  margin-bottom: 36px;
  overflow: hidden;
}

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  padding: 8px 16px;
  margin-right: -1px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field input:checked label {
  background-color: blue;
  box-shadow: none;
  color: white;
}

.switch-field label:first-of-type {
  border-radius: 14px 0 0 14px;
}

.switch-field label:last-of-type {
  border-radius: 0 14px 14px 0;
}

<form >
  <h2>Is this awesome?</h2>
  <div >
    <input type="radio" id="radio-one" name="switch-one" value="yes" checked />
    <label for="radio-one">Win</label>
    <input type="radio" id="radio-two" name="switch-one" value="no" />
    <label for="radio-two">Mac</label>
  </div>

</form>

from https://codepen.io/JiveDig/pen/jbdJXR