Skip to content Skip to sidebar Skip to footer
Home / Asp.net / Asp.net Mvc 4 / Css / Html

Styling Checkboxes In Mvc 4

Post a Comment
I wonder if someone could pass on some advice please..... I have four checkboxes that are styled up in css. This is the straight HTML.

Solution 1:

It looks like you are using the awesome-bootstrap-checkbox.css (found here)

I've use it with Html Helpers before and it is indeed the hidden checkbox that's causing problems. The stylesheet uses selectors that requires the checkbox and its label to be side-by-side, but the html helper places a hidden input between them.

To make the css compatible with Html.CheckboxFor, you'll need to update your stylesheet from this:

.checkboxinput[type=checkbox]:checked + label:after {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
}

.checkbox-dangerinput[type="checkbox"]:checked + label::before, 
.checkbox-dangerinput[type="radio"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

To this:

.checkboxinput[type=checkbox]:checked + input[type="hidden"] + label:after,
.checkboxinput[type=checkbox]:checked + label:after {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
} 

.checkbox-dangerinput[type="checkbox"]:checked + input[type="hidden"] + label::before,
.checkbox-dangerinput[type="checkbox"]:checked + label::before, 
.checkbox-dangerinput[type="radio"]:checked + label::before {
      background-color: #d9534f;
      border-color: #d9534f;
}

The new code accounts for the additional hidden element. You'll have to make this change everywhere the "+" selector is used between the checkbox and its label, but these two changes are the bare minimum to make your example code work.

You may like these posts

Post a Comment for "Styling Checkboxes In Mvc 4"