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

【问题标题】：Foundation 5 custom radio and checkboxesFoundation 5 自定义单选框和复选框
【发布时间】：2016-02-11 13:47:56
【问题描述】：

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

【问题讨论】：

标签： css checkbox radio-button zurb-foundation-5

【解决方案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: "\2715";
         padding-right: 1px;
         border-radius: 0.125rem;
      }
   }

   &[type=radio] {
      & + label:before {
         content: "\2713";
         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: "\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>

【讨论】：

这也可以在 Foundation 6.3.0 上运行和测试。谢谢！

【解决方案2】：

请添加这个，因为它与“开关”冲突

input {
    ...

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

【讨论】：