Creating a CSS HTML Toggle button

Question

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 class="main-box">
  <div class="flex-container active">
    <div class="btn1 btn">Win</div>
    <div class="btn2 btn">Mac</div>
  </div>
</div>

you need to use javascript

Mister Jojo
– Mister Jojo

2022-07-05 21:14:19 +00:00
Commented Jul 5, 2022 at 21:14 — Mister Jojo
– Mister Jojo, Commented Jul 5, 2022 at 21:14

zer00ne · Accepted Answer · 2022-07-05 21:31:18Z

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 class="switch-box">
  <input id='switch' type='checkbox'>
  <div class="flex">
    <label for='switch' class="win btn">Win</label>
    <label for='switch' class="mac btn">Mac</label>
  </div>
</div>

IT goldman · Accepted Answer · 2022-07-05 21:27:38Z

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 class="form">
  <h2>Is this awesome?</h2>
  <div class="switch-field">
    <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

Collectives™ on Stack Overflow

Creating a CSS HTML Toggle button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related