javascript - 调整 html/css 中按钮的大小
问题描述
我有以下代码:
/* 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
,它都不起作用,因此我将其删除。关于如何控制按钮高度的任何建议?
解决方案
使用 chrome 检查您的代码,我对.model-7 .checkbox 标签和model-7 .checkbox label:after进行了调整,并且能够对按钮进行高度调整。使用下面的代码使按钮变大。设置所需大小后,您可以调整动画。
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;
}
推荐阅读
- android - 使用字符串变量作为对象键
- java - android pie 或 api 级别 28 上的套接字无法正常工作。我无法使用主机与 Socket 连接并在 android java 中发布
- flutter - 如何在 Flutter 中渲染 3D 对象?
- python - 运行和调试时输出不同
- python - 如何将过滤后的 pyshark FileCapture 保存到新的 pcap 文件中?
- arrays - Swift - 不同大小的块数组
- v8 - V8 隔离映射内存泄漏
- android - 在多个应用程序之间共享密钥库
- css - 我将如何将 CSS 变量大规模转换回其原始值?
- r - 需要一个 r 函数来反转 geom_sf ggplot 图表的经度坐标