0

I am trying to add custom styles for checkbox, its working fine in both Google Chrome and Safari browser, but it's not working in Mozilla Firefox. Following are the styles I wrote.

input[type='checkbox'] {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    width: 13px;
    height: 13px;
    margin: 0;
    margin-right: 1px;
    display: block;
    float: left;
    position: relative;
    cursor: pointer;
}

input[type='checkbox']:after{
    content: "";
    vertical-align: middle;
    text-align: center;
    line-height: 13px;
    position: absolute;
    cursor: pointer;
    height: 25px;
    width: 25px;
    left: -2;
    top: -2;
    font-size: 10px;
    background: #fff;
    border: 1px solid #D5D8EC;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

// input[type='checkbox']:hover:after, input[type='checkbox']:checked:hover:after {
//  background: #fff;
//  content: url(../img/tick.png);
//  color: #000;
// }

input[type='checkbox']:checked:after{
    background: #fff;
    content: url(../img/tick.png);
    color: #000;
}

Kindly Help me

MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Xavier Issac
  • 414
  • 1
  • 4
  • 25
  • Using pseudo elements on elements that have an empty content model is not supposed to work to begin with, see https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field – CBroe Jan 07 '21 at 07:23
  • 1
    The question does not seem to involve php so perhaps that tag could be removed. The only workaround I know is to alter the HTML so if you have control of the HTML and this is permissible perhaps you could add an html tag. – A Haworth Jan 07 '21 at 07:29

1 Answers1

1

Formally, pseudo elements are not supported on elements such as input. See for example https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Note: The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as , or to
elements.

It seems however that some browsers do allow such pseudo elements in some cases, and in the case of this question Safari and Chrome implement pseudo elements on input elements of type checkbox. Firefox does not and in this regard seems to be following standards more closely.

The question therefore is what to do about it? There are various tricks, one of which is to add a containing element e.g. a span and give that the desired formatting. This of course assumes you have control of the HTML

A Haworth
  • 30,908
  • 4
  • 11
  • 14