CODEWITHSUNDEEP
csssass
Xavier Issac
Xavier Issac

Reputation: 495

Checkbox Custom styles not working in Mozilla Firefox browser

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

Upvotes: 0

Views: 641

Answers (1)

A Haworth
A Haworth

Reputation: 36512

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

Upvotes: 1

Related Questions