0

I found some code that allows my checkboxes and radio buttons to be custom, which works great in all browsers except for IE11. The custom appearance looks good, but the pointer isn't showing and the content property isn't showing up. Not certain how to fix.

.form-checkbox {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  position: relative;
  background-color: #d6d6d6;
  color: #254294;
  height: 25px;
  width: 25px;
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  margin-right: 7px;
  outline: none;
}
.form-checkbox::-ms-check {
  display: none;
}
.form-checkbox:checked::before {
  position: absolute;
  font: 17px/1 'Open Sans', sans-serif;
  left: 7px;
  top: 4px;
  content: '\02143';
  transform: rotate(40deg);
}
<input type='checkbox' class='form-checkbox' />
pingeyeg
  • 632
  • 2
  • 6
  • 23
  • 2
    Single tag elements such as `input` is not meant for pseudo elements. Pseudo element renders as a child of its parent, and e.g. `input ` elements can't have children. – Asons Mar 15 '19 at 19:13
  • Some browser still try's to do something with it (e.g. Chrome), though this is out of the standard and should not be used in production. – Asons Mar 15 '19 at 19:15
  • Would also note this technique won't pass basic [a11y](https://a11yproject.com/) or simple keyboard navigation standards. I'd start with a better template and customize to your needs from there. One that's already addressed the basics. – Chris W. Mar 15 '19 at 19:43
  • @LGSon I looked at the "duplicate" question, but I don't see how it helps me. What can be done in order to solve my objective? – pingeyeg Mar 16 '19 at 13:34
  • 1
    The dupe solve your question by explaining why your code doesn't/won't work. You will need to use a second element to accomplish what you want. – Asons Mar 16 '19 at 15:37
  • Here's a post that links to some good solutions: https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css – Asons Mar 16 '19 at 15:45

0 Answers0