如何在Edge中使用此复选框样式？
如何在Edge中使用此复选框样式？
提问于 2018-12-07 02:19:55
我正在设计我的复选框，让它看起来像切换开关，在Chrome，UC Browser，Safari for Windows中工作得很漂亮，在Firefox中有点起伏，但可以接受。不幸的是，在Edge中，它根本不起作用。
我已经查看了我正在使用的CSS属性，似乎所有的属性都被Edge支持，所以我不明白我遗漏了什么。
.toggle{
width:34px;
height:16px;
border-radius:40px;
position:relative;
-webkit-appearance: none;
margin:2px 0 0 0px;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.4);
background: -webkit-linear-gradient(#c6c6c6,#e3e3e3);
cursor:hand;cursor:pointer;pointer:hand;
outline: 0;
}
.toggle:checked{
background: -webkit-linear-gradient(#77178F,#AD73BB);
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4);
}
.toggle:before {
content:'';
letter-spacing:1px;
color: rgba(0,0,0,.15);
font-size:10px;
font-weight:100;
text-shadow:1px 1px 1px rgba(255,255,255,1);
width:7px;
height:7px;
padding:2px;
top:2px;
left:2px;
position:absolute;
border-radius:40px;
background: linear-gradient(#ebebeb,#f1f1f1);
box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2),
-1px 1px 2px rgba(0, 0, 0, 0.3),
inset 1px 1px 1px #ffffff;
transition: all 0.4s;
}
.toggle:checked:before {
left:20px;
background:#f1f1f1;
}
.toggle:checked:after {
background: linear-gradient(#d8eec4,#5fa718);
box-shadow: inset -1px -1px 4px #417f0b,
inset 1px 1px 2px #5b9f1a;
}<input type=checkbox class=toggle>
在我看来，-webkit-appearance:none没有做它应该做的事情(隐藏原来的复选框)，但这也应该是受支持的。
如果有人在这个问题上有任何经验，并能给我一些洞察力，这将是非常感谢。
回答 2
Stack Overflow用户
发布于 2018-12-07 16:46:48
作为一种解决办法，您可以添加标签以满足您的要求。通过这种方式，您可以将标签与复选框连接起来，并将样式应用于标签，而不是复选框本身。
这是我的测试代码。
CSS。
.toggle {
visibility: hidden;
opacity: 0;
}
.toggle + label {
width: 34px;
height: 16px;
border-radius: 40px;
position: relative;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.4);
background: linear-gradient(#c6c6c6,#e3e3e3);
cursor: pointer;
outline: 0;
display: inline-block;
}
.toggle + label:before {
content: '';
letter-spacing: 1px;
color: rgba(0,0,0,.15);
font-size: 10px;
font-weight: 100;
text-shadow: 1px 1px 1px rgba(255,255,255,1);
width: 7px;
height: 7px;
padding: 2px;
top: 2px;
left: 2px;
position: absolute;
border-radius: 40px;
background: linear-gradient(#ebebeb,#f1f1f1);
box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2), -1px 1px 2px rgba(0, 0, 0, 0.3), inset 1px 1px 1px #ffffff;
transition: all 0.4s;
}
.toggle:checked + label {
background: linear-gradient(#77178F,#AD73BB);
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4);
}
.toggle:checked + label:before {
left: 20px;
background: #f1f1f1;
}
.toggle:checked + label:after {
background: linear-gradient(#d8eec4,#5fa718);
box-shadow: inset -1px -1px 4px #417f0b, inset 1px 1px 2px #5b9f1a;
}HTML
<input type="checkbox" class="toggle" id="mycheckbox">
<label for="mycheckbox" />
Stack Overflow用户
发布于 2020-06-12 03:02:45
将所选答案的另一个灵活变体添加到混合中：https://codepen.io/hawatt/pen/MWKyJJZ
HAML
.toggle-switch
%input{type: 'checkbox', id: 'away-from-desk' }
%span.toggle-handle
%label{'for' => 'away-from-desk'} Away from deskSCSS
$toggle-width: 2.8rem;
$toggle-height: 1.5rem;
$toggle-handle-diameter: calc(#{$toggle-height} * 0.8);
.toggle-switch {
position: relative;
display: flex;
align-items: center;
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: $toggle-width;
height: $toggle-height;
display: inline-flex;
position: relative;
border-radius: $toggle-height;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #c0c0c0;
transition: all ease 0.3s;
z-index: 0;
text-indent: -5000px;
}
.toggle-handle {
pointer-events: none;
display: flex;
position: absolute;
z-index: 2;
width: $toggle-handle-diameter;
height: $toggle-handle-diameter;
background: #fff;
border-radius: 50%;
left: 0;
margin: 0 0.35rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
transition: all ease 0.3s;
}
input:checked,
input.enabled {
background-color: dodgerblue;
& + .toggle-handle {
left: calc(#{$toggle-width} - #{$toggle-handle-diameter} - 0.25rem);
}
}
label {
cursor: pointer;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53657488
复制相关文章
相似问题