如何在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没有做它应该做的事情(隐藏原来的复选框)，但这也应该是受支持的。
如果有人在这个问题上有任何经验，并能给我一些洞察力，这将是非常感谢。
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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53657488
复制相关文章
相似问题
腾讯云开发者
