Question

我想使用CSS来使输入复选框看起来像gliphycon，每次点击它都会改变。目前使用此处的代码：

＆＃13;

.glyphicon:before {
  visibility: visible;
}

.glyphicon.glyphicon-download:checked:before {
  content: "\e013";
}

input[type=checkbox].glyphicon {
  visibility: hidden;
}

＆＃13;

<!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>

＆＃13;

这适用于Google Chrome，但不适用于Firefox或IE。关于它为什么会发生以及如何解决的任何想法？

Answer 1

正如您所看到的here，input[type="checkbox"]不会在Firefox上处理:before伪元素。

另请参阅this question以找到深层解释（但不要使用第一个答案 as as is ，这是一个不好的做法 - 改为使用.after("<span>some text</span>")。

您可以使用另一个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>

：Firefox之前不支持CSS关键字

1 个答案: