Search code examples
htmlcsscheckboxmaterialize

Checkbox not working with materializecss - HTML, CSS


I can't seem to get checkbox to work whilst using the materializecss, as anyone else came cross this issue and managed to fix it?

The library I am using:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

Checkbox without library - https://jsfiddle.net/d2yk4sbv/2/

     <div><label> <input type=checkbox> label 1 </label></div>

Checkbox with library - https://jsfiddle.net/d2yk4sbv/

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
            <div><label> <input type=checkbox> label 1 </label></div>

The checkbox seems to be working fine without the library but the problem is, my application depends on using the materializecss so I can't afford to not use it :(

Link to the materializecss website - http://materializecss.com/


Solution

  • To be work. It seems like you need to put a relation between the label and the input check. Why don't you try in this way

    <div>
      <input type="checkbox" id="check">
      <label for="check">label 1</label>
    </div>
    

    http://materializecss.com/forms.html#checkbox