Safari not picking up custom checkbox

[tomerds]

Hi, I dont believe this is due to any antivirus software for starters

Custom styling on the checkbox doesn't register on safari v13

I am using styled components:

const Checkbox = styled.input.attrs({
  type: 'checkbox',
  className: 'form-checkbox',
})``

and in tailwind config

checkbox: {
          height: theme('height.5'),
          width: theme('width.5'),
          color: 'black',
          icon:
            '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><title></title><g id="icomoon-ignore"></g><path fill="white" d="M634.698 223.68h124.716l-272.9 557.867-63.025 18.773-158.917-324.522 119.346-15.42 68.386 140.807 182.38-377.501z"></path></svg>',
          border: `1px solid ${theme('colors.disabled')}`,
          borderRadius: '0.125rem',
          '&:focus, &:active': {
            boxShadow: `0 0 0 4px ${theme('colors.primary.200')}`,
            border: `1px solid ${theme('colors.disabled')}`,
          },
          '&:disabled': {
            backgroundColor: `${theme('colors.outline')}`,
          },
        },

and it should look like this (as it does on chrome)

but instead its just the os checkbox

[tomerds]

solved:

input[type='checkbox'] {
  -webkit-appearance: none;
}

[adamwathan]

More likely you just want to make sure you are using autoprefixer.

[tomerds]

thanks @adamwathan