Foundation 5 custom radio and checkboxes - css

Question

How can I use custom radio buttons and checkboxes in ZURB Foundation 5? It seems like it was easy in ZURB Foundation 4, but can't get the custom radio and checkbox to work.

Answer 1

I don't know what have you been using before but it can be simply done by custom CSS code without JavaScript like this:
SCSS
input {
&[type=checkbox], &[type=radio] {
opacity: 0;
position: absolute;
&:checked + label:before {
background: $primary-color;
}
& + label:before {
display: inline-block;
text-align: center;
line-height: 1;
border: 0.0625rem solid $primary-color;
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
font-size: 0.875rem;
color: white;
background: white;
}
}
&[type=checkbox] {
& + label:before {
content: "\2715";
padding-right: 1px;
border-radius: 0.125rem;
}
}
&[type=radio] {
& + label:before {
content: "\2713";
border-radius: 50%;
}
}
}
If you don't want to have any character inside checboxes or radio buttons then put whitespace into content attribute:
[...]
content: " ";
[...]
CodePen playground
Compiled CSS + HTML to show working example
input[type=checkbox],
input[type=radio] {
opacity: 0;
position: absolute;
}
input[type=checkbox]:checked + label:before,
input[type=radio]:checked + label:before {
background: #007095;
}
input[type=checkbox] + label:before,
input[type=radio] + label:before {
display: inline-block;
text-align: center;
line-height: 1;
border: 0.0625rem solid #007095;
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
font-size: 0.875rem;
color: white;
background: white;
}
input[type=checkbox] + label:before {
content: "\2715";
padding-right: 1px;
border-radius: 0.125rem;
}
input[type=radio] + label:before {
content: "\2713";
border-radius: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="small-12 column">
<h3>Radio Button</h3>
<div class="inline">
<input type="radio" name="role" value="admin" id="admin" checked />
<label for="admin">admin</label>
</div>
<div class="inline">
<input type="radio" name="role" value="user" id="user" />
<label for="user">user</label>
</div>
</div>
<div class="small-12 column" style="margin-top: 10px;">
<h3>Checkbox</h3>
<input type="checkbox" id="captcha" checked/>
<label for="captcha" translate>I am human</label>
</div>
</div>

Answer 2

Please add this because it conflicts with the "switch"
input {
...
&.switch-input {
& + label:before {
display: none;
}
}
}