Foundation 5 自定义单选框和复选框

Question

如何在 ZURB Foundation 5 中使用自定义单选按钮和复选框？在 ZURB Foundation 4 中似乎很容易，但无法使自定义单选按钮和复选框正常工作。

Answer 1

我不知道你以前用过什么，但它可以通过自定义 CSS 代码简单地完成，不需要 JavaScript 像这样：

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: "15";
         padding-right: 1px;
         border-radius: 0.125rem;
      }
   }

   &[type=radio] {
      & + label:before {
         content: "13";
         border-radius: 50%;
      }
   }
}

如果您不想在复选框或单选按钮中包含任何字符，请将空格放入 content 属性中：

[...]

content: " ";

[...]

CodePen playground

已编译 CSS + HTML 以显示工作示例

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: "15";
  padding-right: 1px;
  border-radius: 0.125rem;
}
input[type=radio] + label:before {
  content: "13";
  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

请添加这个，因为它与 "switch"

冲突

input {
    ...

    &.switch-input {
       & + label:before {
         display: none;
      }
   }
}

Foundation 5 自定义单选框和复选框

Foundation 5 custom radio and checkboxes

css

checkbox

radio-button

zurb-foundation-5