The same checkbox in all major browsers

Yesterday we were testing a contact form in different browsers and noticed that checkbox didn’t show up on Safari and its style looked different in all browsers. So today I was fixing it and here I will show you how.

The major mistake in my case was that I put a class of checkbox inside an input tag.

React Contact Form

So I put it outside and used below’s CSS, which I found in this post.

 .check-box {
          display: inline-flex;
          cursor: pointer;
          position: relative;

        .check-box > span {
            color: #e2e2e2;
          padding: 0.5rem 0.25rem;

        .check-box > input {
          height: 25px;
          width: 25px;
          -webkit-appearance: none;
          -moz-appearance: none;
          -o-appearance: none;
          appearance: none;
          border: 1px solid #e2e2e2;
          border-radius: 4px;
          outline: none;
          transition-duration: 0.3s;
          background-color: #edf1f4;
          cursor: pointer;

        .check-box > input:checked {
          border: 1px solid  #9181cc;
          background-color: #cd93ba;

        .check-box > input:checked + span::before {
          content: '\2713';
          display: block;
          text-align: center;
          color:  #9181cc;
          position: absolute;
          left: 0.7rem;
          top: 0.2rem;

        .check-box > input:active {
          border: 2px solid #9181cc;

Here is my final result in Chrome, Safari, and Firefox. Now they look the same 😉

Recommended Articles

Leave a Reply

Your email address will not be published. Required fields are marked *