How can I apply a CSS style to Html.CheckBoxFor in MVC 5

This seems like it should be so basic but for the life of me I can't get it working.

In my MVC 5 web app, I would like to show the user a list of layouts using checkboxes so the user can select whichever layouts are required.

I'm using an editor template, that gets called as such:

<table class="table">
<tr>
            <th> 
                @Html.DisplayName("Selected")
            </th>
            <th>
                @Html.DisplayNameFor(x => x.Layout)
            </th>
        </tr>
        @Html.EditorForModel()
</table>

Inside the template I use a helper for the checkbox.

<tr>
    <td>
         @Html.CheckBoxFor(x => x.IsSelected)
    </td>
    <td>    
        @Html.DisplayFor(x => x.Layout)
    </td>
</tr>

This all works fine, I can capture what the user has selected in the Post

What I cannot do however is apply any CSS styles to the checkbox.

What I have read is it should be a matter of:

@Html.CheckBoxFor(x => x.IsSelected, new { @class = "css-checkbox" })

This however causes the checkbox to not be rendered.

I have tried a few things such as wrapping the checkbox in a

<div class="checkbox"> 

but even though the checkbox is rendered, I cannot select any of the items.

Now there is hopefully just something simple I am doing or not doing?

EDIT 1:

I seem to have come across the problem, but am not sure how to fix it.

If I use the following code, it works:

<input id="theid" name="theid" type="checkbox" class="css-checkbox" /> 
<label class="css-label" for="theid">Using input </label> 

What I need to do is for the:

@Html.CheckBoxFor(x => x.IsSelected, new { @class = "css-checkbox" })

to be turned into the same as when I use input and label.

The page source looks as such:

<input checked="checked" class="css-checkbox" data-val="true" data-val-required="The IsSelected field is required." id="test5" name="IsSelected" type="checkbox" value="true" /><input name="IsSelected" type="hidden" value="false" />


<input id="theid" name="theid" type="checkbox" class="css-checkbox" /> 
<label class="css-label" for="theid">Using input </label> 

The top comes from the helper and the bottom one is using the input tag directly.