Tengo el siguiente código:

/* toggle button*/
*, *:after, *:before {
  box-sizing: border-box;
}

/*=====================*/
.checkbox {
  position: relative;
  display: inline-block;
}
.checkbox:after, .checkbox:before {
  font-family: FontAwesome;
  font-feature-settings: normal;
  -webkit-font-kerning: auto;
          font-kerning: auto;
  font-language-override: normal;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  text-rendering: auto;
}
.checkbox label {
  width: 90px;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
}
.checkbox label:after {
  content: '';
  position: absolute;
  width: 50px;
  border-radius: 100%;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}
.checkbox input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.checkbox input:hover + label:after {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
}
.checkbox input:checked + label:after {
  left: 40px;
}

.model-7 .checkbox label {
  background: none;
  border: 5px solid #555;
  height: 42px;
  margin-left: 15px;
}
.model-7 .checkbox label:after {
  background: #555;
  box-shadow: none;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
}
.model-7 .checkbox input:checked + label {
  border-color: #04c6db;
}
.model-7 .checkbox input:checked + label:after {
  background: #04c6db;
  left: 50px;
}
<div class="model-7">
  <div class="checkbox">
    <input type="checkbox">
    <label></label>
  </div>
</div>

Quiero cambiar el tamaño del botón de alternancia, pero el problema es que no hay ningún elemento en el CSS del botón de alternancia que controle la altura. Puedo controlar el ancho del botón, pero no existe tal elemento que controle la altura del botón. Inicialmente, en el .checkbox label había height: 42px; pero lo eliminé porque no hizo nada. Siempre que cambiaba la altura de 42px a 30px, no funcionaba, por lo que simplemente lo eliminaba. ¿Alguna sugerencia sobre cómo puedo controlar la altura del botón?

0
helloworld 27 feb. 2021 a las 00:36

2 respuestas

La mejor respuesta

Modificar la etiqueta y su altura del pseudoelemento ::after cambia el tamaño del botón de alternancia

/* toggle button*/
*, *:after, *:before {
  box-sizing: border-box;
}

/*=====================*/
.checkbox {
  position: relative;
  display: inline-block;
}
.checkbox:after, .checkbox:before {
  font-family: FontAwesome;
  font-feature-settings: normal;
  -webkit-font-kerning: auto;
          font-kerning: auto;
  font-language-override: normal;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  text-rendering: auto;
}
.checkbox label {
  width: 90px;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
}
.checkbox label:after {
  content: '';
  position: absolute;
  width: 50px;
  border-radius: 100%;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}
.checkbox input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.checkbox input:hover + label:after {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
}
.checkbox input:checked + label:after {
  left: 40px;
}

.model-7 .checkbox label {
  background: none;
  border: 5px solid #555;
  height: 30px;
  margin-left: 15px;
}
.model-7 .checkbox label:after {
  background: #555;
  box-shadow: none;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
}
.model-7 .checkbox input:checked + label {
  border-color: #04c6db;
}
.model-7 .checkbox input:checked + label:after {
  background: #04c6db;
  left: 50px;
}
<div class="model-7">
  <div class="checkbox">
    <input onclick="setTimeout(function(){location.href='https://www.hussaino-darkmode.tk/';}, 500);" type="checkbox"/>
    <label></label>
  </div>
</div>

  
0
Alba Herrerías 26 feb. 2021 a las 21:58

Usando Chrome para verificar su código, realicé ajustes en la .modelo-7 .etiqueta de la casilla de verificación y la etiqueta de la casilla de verificación del modelo-7: después y pude realizar ajustes de altura. al botón. El uso del siguiente código agranda el botón. Puede ajustar la animación después de haber establecido el tamaño deseado.

Css

.model-7 .checkbox label {
  background: none;
  border: 5px solid #555;
  height: 62px;
  margin-left: 15px;
}
.model-7 .checkbox label:after {
  background: #555;
  box-shadow: none;
  top: 5px;
  left: 5px;
  width: 40px;
  height: 40px;
}
0
Andreas C 26 feb. 2021 a las 21:51