checkbox styling works until implementing the checkmark with content: '\2713'; Styled components

I am editing a checkbox for the first time with styled-components. Everything is going according to plan except when adding the checkmark as content: '\2713'; all of the styles go back to default. How can I keep my style changes and add the checkmark properly when clicked?

Here is the code

const RememberMe = styled.span`
    display: flex;
    align-items: center;
    color: #b3b3b3;
    font-size: 13px;
    font-weight: 500;
`
const Checkbox = styled.input`
    height: 15px;
    width: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: none;
    border-radius: 4px;
    outline: none;
    transition-duration: 0.3s;
    background-color: #c1c1c1;

    &:checked {
        background-color: red;
        // IF I TAKE THIS NEXT LINE AWAY THE BACKGROUND COLOR CHANES AS I WANT. INSTEAD IT CHANGES THE CHECKBOX BACK TO DEFAULT
        content: '\2713';
    }
`

<HelpContainer>
     <RememberMe><Checkbox type="checkbox"/>Remember Me</RememberMe>
     <HelpItem>Need Help?</HelpItem>
</HelpContainer>