0

I want to use CSS to make a input-checkbox look like a gliphycon that changes every time that its clicked. Currently using the code here:

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

This works great on Google Chrome, but not Firefox or IE. Any ideas as to why it is happening and how to fix it?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Wolfyaskingstuff
  • 139
  • 1
  • 9
  • This is not a browser specific thing, the reason you're experiencing this is just the nature of self closing void tags, like `input`, `br`, `img`, etc. These tags can't have `pseudo-elements` applied to them since they are not *containing* elements,elements that *can contain other elements*. – UncaughtTypeError Oct 29 '17 at 07:56
  • @Philicare please read all the anwsers and not only one anwser of the duplicate question ... and the OP question is **why it's not working**, he never asked about a particular solution, he said `why it is happening and how to fix it?` – Temani Afif Oct 29 '17 at 09:05
  • @Philicare First no one said that your solution is wrong or less good, it's not the issue. And we don't mind about **the situation** as you said, becasuse in this case all the situation are different and we will never have duplicate questions. We focus on the general concern of the question which is exactly the same, and if the OP read the other one i am pretty sur he will find his answer because he wil find the **why** and the **how** with different manners. – Temani Afif Oct 29 '17 at 09:26
  • @Philicare `If he reads in such an answer that "a CSS solution is impossible (in bold), I'm afraid he thought it's true` --> **and it's true** ! if you read carefully the anwser, it's true that we cannot use pseudo element. The CSS solution you provide (and other do) is a work around by adding **extra HTML** and then applying CSS to it. Can you tell me that you can do it without having the `label` tag and using **only** CSS? – Temani Afif Oct 29 '17 at 09:30
  • @Philicare it's not a question about how is right and how is not. We are simply discussing. I never said you are wrong and you provide a bad solution since your solution is working fine. Am explaining why this is marked as duplicated and it should be. – Temani Afif Oct 29 '17 at 09:45

1 Answers1

0

As you can see here, input[type="checkbox"] doesn't deal with :before pseudo-element on Firefox.

See also this question to find deep explainations (but don't use the first answer as-is, it's a bad practice — use .after("<span>some text</span>") instead).

You could fix it using another span, rather the pseudo-element.

100% CSS solution (with a very little bit 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>
  • i don't agree with the **100% CSS solution**. You clearly said `You could fix it using another span`. You modified the html then you did CSS. And you didn't add a `span` you add a `label` and you modified the initial html structure – Temani Afif Oct 29 '17 at 09:33
  • @Philicare i know and i never said this is the best solution and am also againt using it, but what i said is that in that question we already have 18 anwsers + a lot of comments that explain everything about this issue and that's why this is makred as duplicated. Am not complaining about your answer – Temani Afif Oct 29 '17 at 09:47
  • It's already done in the top of the question when it's marked as duplicate. And the duplicate mark is necessary to avoid people adding more answer to the question and instead redirect them to the other one. To avoid also having duplicated answer. – Temani Afif Oct 29 '17 at 10:01