Question

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

Answer 1

我不知道您之前使用过什么，但它可以通过自定义CSS代码完成，而不需要像这样的代码：

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%;
      }
   }
}

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

[...]

content: " ";

[...]

here.

编译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>

Answer 2

请添加此项，因为它与＆＃34;开关＆＃34;

冲突

input {
    ...

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

基金会5自定义广播和复选框

2 个答案: