Customize checkbox code not working in Firefox and internet explorer

Asked Aug 02 '18 at 06:58

Active Aug 17 '18 at 04:29

Viewed 96 times

I have created a custom checkbox. It is working fine in chrome but not working in Firefox and IE. I don't want to use any extra div

.check:after {
            line-height: 1.5em;
            content: '';
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-top: -4px;
            margin-left: -4px;
            border: 1px solid rgb(192,192,192);
            background: rgb(224,224,224);
        }
        .check:checked:after {
            width: 30px;
            content: '\2713';
            height: 30px;
            background: green;
            text-align: center;
            color: #fff;
            font-size: 21px;
            font-weight: bold;
            border: 3px solid green;
        }
        .check:hover:after {
          border: 3px solid green;
        }

<input type="checkbox" class="check"/>

edited Aug 17 '18 at 04:29

asked Aug 02 '18 at 06:58

Punit Saharawat

3

In firefox, ::before or ::after wont work on input. You need to work with the label instead of the input – Aravind S Aug 02 '18 at 07:06
Just google CSS checkbox and there are many examples to reuse ;) – Domenik Reitzner Aug 02 '18 at 07:11
Refer this one for a perfect solution https://stackoverflow.com/questions/19145504/style-a-checkbox-in-firefox-remove-check-and-border – Aravind S Aug 02 '18 at 07:12
[::before with input in Firefox](https://stackoverflow.com/questions/37653706/before-with-input-in-firefox) – Tharaka Nilupul Dharmabandu Aug 02 '18 at 07:14

Customize checkbox code not working in Firefox and internet explorer

0 Answers0