使用标签作为复选框 - 无法选择某些 "Checkboxes"

Question

我有一些复选框，出于美观原因，我隐藏了复选框（输入 {display:none;}）并且只使用标签作为复选框。现在我的问题是无法选择某些 "checkboxes"。每个标签的可点击区域似乎都关闭了。代码和 fiddle 如下...任何见解将不胜感激！谢谢！

https://jsfiddle.net/dorjanjo/eojcv4s3/

#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

It is creating problem because you have not given proper id's and for.

使用标签作为复选框 - 无法选择某些 "Checkboxes"

Using Label as Checkbox -Some "Checkboxes" Cannot Be Selected

html

css

checkbox

label

clickable