:after not working in firefox and IE

Question

I am using this code for: when someone clicks on the checkbox (and the checkbox is not checked) to show a form, and when they click again (and the checkbox is checked) it hides the form. And all is working on Chrome, but on IE and Firefox it’s not working. I don’t know why. I think it's something from :after but ... if someone can help me...:

div#payment_address_shipping_address_input input[type=checkbox] {
 width: 13px;
    height: 13px;
    cursor: pointer;
    font-size: 10px;
    margin: 0;
    text-align: center;
    position:relative;
    display:inline-block;
}

div#payment_address_shipping_address_input input[type=checkbox]:after {
    content: "\2713";
    background-color: #ffffff;
    display: inline-block;
    border: 1px solid black;
    visibility: visible;
    width: 13px;
    height: 14px;
    font-size: 10px;
    font-weight: 700;
    position:relative;
}

div#payment_address_shipping_address_input.checkbox-input.form-group.sort-item input[type=checkbox]:checked:after {
    content: " ";
    position:relative;
    display:inline-block;
}

<div id="payment_address_shipping_address_input" class="checkbox-input form-group sort-item   " data-sort="18">  <div class="col-xs-12"> <label for="payment_address_shipping_address" class="control-label"> <input type="hidden" name="payment_address.shipping_address" value="0"> <input type="checkbox" autocomplete="on" name="payment_address.shipping_address" id="payment_address_shipping_address" class="validate not-required" value="1" checked="checked"> <span title="">Искам фактура</span> </label> </div>  </div>

It's `::after`. See https://developer.mozilla.org/en-US/docs/Web/CSS/::after — Tomalak, Jan 17 '17 at 13:03
And as far as I know an `input` can't have any pseudo css. @Tomalak, most browsers accept `:after` too. — putvande, Jan 17 '17 at 13:21
I try with :after and with ::after. Is same. Not is working. — Станимир Стоянов, Jan 17 '17 at 13:22
Yes. I use it on chrome in OpenCart. On the checkout form on the bottom, where is the checkbox. And all is okay, but only in chrome. — Станимир Стоянов, Jan 17 '17 at 13:42
Just for testing: Does it work when you wrap the element in a
and apply the `::after` to that div? — Tomalak, Jan 17 '17 at 14:06
You can't use `::before` or `::after` on inputs. If some browsers do allow you to, that's a flaw in those browsers, not in the ones that behave according to the standard. — Mr Lister, Jan 17 '17 at 15:01
@СтанимирСтоянов As others have pointed out you cannot use `::before` or `::after` on input elements. You can change the code on OpenCart using template files. — disinfor, Jan 17 '17 at 15:17

:after not working in firefox and IE

0 Answers0