调整html/css中的按钮大小

Question

我有以下代码：

​

/* 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>

​

我想调整切换按钮的大小，但问题是在切换按钮的css中没有控制高度的元素。我能够控制按钮的宽度，但是没有控制按钮高度的元素。最初，在.checkbox label中有height: 42px;，但是我删除了它，因为它没有做任何事情。每当我将高度从42px更改为30px时，它就无法工作，所以我只是删除了它。对我如何控制按钮的高度有什么建议吗？

Answer 1

修改标签及其::after伪元素高度调整切换按钮的大小。

​

/* 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 type="checkbox" >
    <label></label>
  </div>
</div>

​

Answer 2

使用chrome检查您的代码，我对.model-7 .checkbox标签和model-7 .checkbox标签进行了调整:在和我能够对按钮进行高度调整之后。使用下面的代码使按钮更大。你可以调整动画后，你已经设置了你想要的大小。

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;
}

Answer 3

我会这样做的..。

​

szW.value = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--szW'))
szH.value = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--szH'))

document.querySelectorAll('input[type=range]').forEach(r=>r.oninput=_=>
  {
  r.closest('label').dataset.val = r.value
  document.documentElement.style.setProperty(`--${r.id}`, `${r.value}px`)
  })

:root {
  --szW : 90px;
  --szH : 40px;
  --szB : 5px;    
  }
  
body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
*, *:after, *:before {
  box-sizing : border-box;
  }

input[type=checkbox].model-8 {
  display: none;
}
input[type=checkbox].model-8 + label {
  position      : relative;
  display       : inline-block;
  width         : var(--szW);
  height        : var(--szH);
  border        : var(--szB) solid #555555;
  border-radius : calc( var(--szH) / 2 );
  transition    : 0.4s;
  }
input[type=checkbox].model-8 + label::before {
  position         : absolute;
  top              : 1.5px;   
  left             : 1.5px;
  display          : block;
  content          : ' ';
  width            : calc( var(--szH) - ( var(--szB) * 2 ) - 3px);
  height           : calc( var(--szH) - ( var(--szB) * 2 ) - 3px);
  border-radius    : 50%;
  background-color : #555555;
  transition       : 0.4s;
  }
input[type=checkbox].model-8:checked + label {
  border-color : #04c6db;
  }
input[type=checkbox].model-8:checked + label::before {
  left             : calc( var(--szW) -  var(--szH) + 1.5px );
  background-color : #04c6db;
  }

/******************************/
label.rg input {
  vertical-align : middle;
  width          : 300px;
  }
label.rg::after {
  content : attr(data-val) 'px';
  }
label.rg::before {
  display : inline-block;
  width   : 3.3em;
  content : attr(data-lib);
  }

<h3>make your sizing</h3>
<label class="rg" data-val="90" data-lib="width :"><input type="range" id="szW"  min="40" max="200" step="10" value="90"></label> <br>
<label class="rg" data-val="40" data-lib="height :"><input type="range" id="szH" min="30" max="80" step="5" value="40"></label> <br>

<hr>
<br>
<input type="checkbox" id="m8" class="model-8" ><label for="m8"></label>

​