我创建了This切换按钮,我无法将其大小设置为百分比 - 因此它可以响应。我设法将它的文本设置为视口宽度和高度 - 它运行良好,但我不想在视口测量中使用该按钮....
或许:: before和:: after无法以百分比形式接收测量结果?
HTML:
<div class="cont">
<div class="box">
<div class="material-switch">
<input id="someSwitchOptionDefault" name="someSwitchOption001"
type="checkbox" />
<label for="someSwitchOptionDefault" class="label-default"><span
class="homme">Homme</span><span class="femme">Femme</span>
</label>
</div>
</div>
</div>
的CSS:
.cont {
padding: 50px;
background-color: #e9e9e9;
width: 100vw;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
}
.material-switch > input[type="checkbox"] {
display: none;
}
.material-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px;
}
.material-switch > input[type="checkbox"] + label::before {
content: "\f222";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #333333;
text-align: right;
border: 1px solid #dcdcdc;
padding-left: 10px;
padding-right: 10px;
}
.material-switch > label::before {
background-color: #f6f6f6;
border-radius: 16px;
height: 24px;
margin-top: -12px;
position: absolute;
width: 100px;
}
.material-switch > label::after {
/*--button---*/
content: "";
font-size: 18px;
background-color: #fff;
border-radius: 15px;
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
width: 73px;
border: 1px solid #dcdcdc;
}
.material-switch > input[type="checkbox"]:checked + label::before {
background-color: #f6f6f6;
content: "\f221";
color: "blue";
font-family: FontAwesome;
text-align: left;
}
.material-switch > input[type="checkbox"]:checked + label::after {
background-color: #fff;
left: 30px;
}
.femme {
display: none;
}
.material-switch > input[type="checkbox"]:checked + label>span.homme {
display: none;
}
.material-switch > input[type="checkbox"]:checked + label>span.femme {
display: block;
}
.homme {
font-family: 'Roboto Light', sans-serif;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #5d5d5d;
font-size: 1vw;
position: absolute;
top: -8px;
left: 9px;
z-index: 999;
}
.femme {
font-family: 'Roboto Light', sans-serif;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #5d5d5d;
font-size: 1vw;
position: absolute;
top: -8px;
z-index: 999;
}
.material-switch > input[type="checkbox"]:checked + label .femme {
left: 41px;
}
.homme::before {
content: "\f222";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #49c8c1;
margin-right: 5px;
}
.femme::before {
content: "\f221";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #49c8c1;
margin-right: 5px;
}
答案 0 :(得分:0)
我在css
中看到你覆盖了很多html DOM属性,比如<input>
组件。我建议你使用普通css提供的简单优雅的切换按钮。
您可以查看以下切换按钮示例:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch https://codepen.io/mburnette/pen/LxNxNg