Question

我有一些复选框，出于审美原因，我隐藏了复选框（输入{display：none;}）并且只使用标签作为复选框。现在我的问题是无法选择某些“复选框”。似乎每个标签的可点击区域都是关闭的。代码和小提琴如下......任何见解都会非常感激！谢谢！

#checkboxes {
  margin: 2em 0em;
}

#checkboxes input {
  display: none;
}

#checkboxes input:checked~label {
  border: 4px solid #79A48B;
  color: #000;
}

#checkboxes label {
  background: #fff;
  color: #666;
  padding: 0em 2em;
  border: 4px solid #b8c2c6;
  cursor: pointer;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  not supported by any browser */
  line-height: 2.5em;
  text-align: center;
  margin-bottom: 1em;
}

#checkboxes ul li {
  display: inline;
  width: 100%;
}

<div id="checkboxes">
  <ul>

    <li>
      <input type="checkbox" id="c1"><label for="c1">Website Design</label>
    </li>

    <li>
      <input type="checkbox" id="c2"><label for="c2">Application Development</label>
    </li>

    <li>
      <input type="checkbox" id="c2"><label for="c3">UI/UX Design</label>
    </li>

    <li>
      <input type="checkbox" id="c3"><label for="c4">Sharepoint Solutions</label>
    </li>

    <li>
      <input type="checkbox" id="c3"><label for="c5">Print Design</label>
    </li>

    <li>
      <input type="checkbox" id="c3"><label for="c6">Logo & Identity Design</label>
    </li>

    <li>
      <input type="checkbox" id="c3"><label for="c7">Wordpress</label>
    </li>

    <li>
      <input type="checkbox" id="c3"><label for="c8">SEO & Marketing</label>
    </li>

    <li>
      <input type="checkbox" id="c3"><label for="c9">Business Intelligence Soultions</label>
    </li>
  </ul>
</div>

Answer 1

you have mismatch between **for** and **id** attributes, both need to match each other

<div id="checkboxes">
        <ul>

            <li>

            <input type="checkbox" id="c1"><label for="c1">Website Design</label>

            </li>

             <li>

            <input type="checkbox" id="c2"><label for="c2">Application Development</label>

           </li>

            <li>

            <input type="checkbox" id="c3"><label for="c3">UI/UX Design</label>

           </li>

            <li>

            <input type="checkbox" id="c4"><label for="c4">Sharepoint Solutions</label>

            </li>

             <li>
            <input type="checkbox" id="c5"><label for="c5">Print Design</label>
           </li>

            <li>
            <input type="checkbox" id="c6"><label for="c6">Logo & Identity Design</label>
            </li>

             <li>
            <input type="checkbox" id="c7"><label for="c7">Wordpress</label>
            </li>

             <li>
            <input type="checkbox" id="c8"><label for="c8">SEO & Marketing</label>
           </li>

            <li>
            <input type="checkbox" id="c9"><label for="c9">Business Intelligence Soultions</label>
            </li>
        </ul>
      </div>

Answer 2

因为您没有给出正确的ID而且正在创建问题。

使用标签作为复选框 - 无法选择某些“复选框”

2 个答案: