seo Question posted in
Some basic information to get you started with this can be found here.

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

I have some checkboxes, for aesthetic reasons, I’m hiding the checkboxes (input {display:none;}) and am using just the label to act as the checkbox. Now my issue is that some of the “checkboxes” cannot be selected. The clickable area of each label is off it seems. Code and fiddle is below… Any insight would be much appreciated! Thank you!

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>
Tags:

2

Answers


  1. 0 
    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>
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search