Changing checkbox appearance in simple form

I'm attempting to change the appearance of checkboxes from the default one to a custom one that I am referencing in my stylesheet. I know how to do this when I create a regular form in HTML, but I'm having trouble when trying to do this using simple_form.

Form:

= simple_form_for(@notification_option, url: {controller: "notification_options", action: "update", option_id: @notification_option.id}, html: {:multipart => true, autocomplete: "off", :class=> "form-inline; display:none;"}, remote: true, :authenticity_token => true) do |f|          
            = f.input :receiveEmail, inline_label: 'Receive email notifications', label:false, input_html:{class: "notificationOptionLabel"}
            = f.input :requestTeam, inline_label: 'Requests to join the team', label:false, input_html:{class: "notificationOptionLabel"}
            = f.input :joinedTeam, inline_label: 'Someone has joined the team', label:false, input_html:{class: "notificationOptionLabel"}
            = f.input :leftTeam, inline_label: 'Someone has left the team', label:false, input_html:{class: "notificationOptionLabel"}
            = f.button :submit, "Submit", :class => "btn buttonRoundedCornersDarkBlue text-center", style:"display: none;", id: "notification-option-submit"

Stylesheet:

.notificationOptionLabel input[type="checkbox"]+label{
    background: url('assets.png') no-repeat -531px -3753px !important;
    width: 16px;
    height: 15px;
}

.notificationOptionLabel input[type="checkbox"]:checked + label{
    background: url('assets.png') no-repeat -507px -3751px !important;
    width: 16px;
    height: 17px;
}