<分区>
<分区>
我想使用 CSS 使输入复选框看起来像一个每次点击都会改变的 gliphycon。目前在这里使用代码:
.glyphicon:before {
visibility: visible;
}
.glyphicon.glyphicon-download:checked:before {
content: "\e013";
}
input[type=checkbox].glyphicon {
visibility: hidden;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<label class="checkbox-inline"><input type="checkbox" class="glyphicon glyphicon-download" value=""/>
To Download
</label>
</body>
</html>这在 Google Chrome 上运行良好，但不适用于 Firefox 或 IE。 关于为什么会发生以及如何解决它的任何想法？
最佳答案
如你所见here , input[type="checkbox"]不处理 :before Firefox 上的伪元素。
另见 this question找到深入的解释(但不要使用第一个答案原样，这是一种不好的做法 — 请改用 .after("<span>some text</span>"))。
您可以使用另一个跨度而不是伪元素来修复它。
100% CSS 解决方案(带有一点点 HTML):
input.glyphicon {
visibility: hidden;
}
label.gly {
visibility:hidden;
}
input.glyphicon:checked + label.gly {
visibility:visible;
}<input id="the_cb" type="checkbox" class="glyphicon glyphicon-download" value=""/>
<label class="gly">👍</label>
<label class="checkbox-inline" for="the_cb">To Download</label>关于html - :before CSS keyword not supported on Firefox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46997884/