0

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"/>

Improve this question
4
  • 3
    In firefox, ::before or ::after wont work on input. You need to work with the label instead of the input Commented Aug 2, 2018 at 7:06
  • Just google CSS checkbox and there are many examples to reuse ;) Commented Aug 2, 2018 at 7:11
  • Refer this one for a perfect solution stackoverflow.com/questions/19145504/… Commented Aug 2, 2018 at 7:12
  • ::before with input in Firefox Commented Aug 2, 2018 at 7:14
Related questions
2
Check box style issue in firefox
0
checkbox-customization
0
Custom checkbox not working in IE 7 and IE 8
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.