以简单形式更改复选框外观

Question

我正在尝试将复选框的外观从默认复选框更改为我在样式表中引用的自定义复选框。我在HTML中创建常规表单时知道如何执行此操作，但在使用simple_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"

样式表：

.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;
}