Checkbox - 图1

Checkbox

Checkbox Layout

Checkbox layout is pretty simple:

  1. <!-- checkbox element -->
  2. <label class="checkbox">
  3. <!-- checkbox input -->
  4. <input type="checkbox">
  5. <!-- checkbox icon -->
  6. <i class="icon-checkbox"></i>
  7. </label>

Checkbox Group/List

To create Checkbox group/list we need to use List View with few additions:

  1. <div class="list">
  2. <ul>
  3. <!-- Single checkbox item -->
  4. <li>
  5. <label class="item-checkbox item-content">
  6. <!-- Checkbox input -->
  7. <input type="checkbox"/>
  8. <!-- Checkbox icon -->
  9. <i class="icon icon-checkbox"></i>
  10. <div class="item-inner">
  11. <!-- Checkbox Title -->
  12. <div class="item-title">Books</div>
  13. </div>
  14. </label>
  15. </li>
  16. <!-- Another checkbox item -->
  17. <li>
  18. <label class="item-checkbox item-content">
  19. <!-- Checked by default -->
  20. <input type="checkbox" checked/>
  21. <i class="icon icon-checkbox"></i>
  22. <div class="item-inner">
  23. <div class="item-title">Music</div>
  24. </div>
  25. </label>
  26. </li>
  27. ...
  28. </ul>
  29. </div>
  • item-content must be a **<label>** element with additional **item-checkbox** class
  • Checkbox input (<input type="checkbox">) must be a first child of item-content
  • Checkbox icon must be after checkbox input

Examples

Inline

  1. <div class="block block-strong">
  2. <p>Lorem <label class="checkbox"><input type="checkbox"><i class="icon-checkbox"></i></label> ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi <label class="checkbox"><input type="checkbox"><i class="icon-checkbox"></i></label> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla mollitia!</p>
  3. </div>

Checkbox Group

  1. <div class="list">
  2. <ul>
  3. <li>
  4. <label class="item-checkbox item-content">
  5. <input type="checkbox" name="demo-checkbox" value="Books" checked="checked"/>
  6. <i class="icon icon-checkbox"></i>
  7. <div class="item-inner">
  8. <div class="item-title">Books</div>
  9. </div>
  10. </label>
  11. </li>
  12. <li>
  13. <label class="item-checkbox item-content">
  14. <input type="checkbox" name="demo-checkbox" value="Movies"/>
  15. <i class="icon icon-checkbox"></i>
  16. <div class="item-inner">
  17. <div class="item-title">Movies</div>
  18. </div>
  19. </label>
  20. </li>
  21. <li>
  22. <label class="item-checkbox item-content">
  23. <input type="checkbox" name="demo-checkbox" value="Food"/>
  24. <i class="icon icon-checkbox"></i>
  25. <div class="item-inner">
  26. <div class="item-title">Food</div>
  27. </div>
  28. </label>
  29. </li>
  30. <li>
  31. <label class="item-checkbox item-content">
  32. <input type="checkbox" name="demo-checkbox" value="Drinks"/>
  33. <i class="icon icon-checkbox"></i>
  34. <div class="item-inner">
  35. <div class="item-title">Drinks</div>
  36. </div>
  37. </label>
  38. </li>
  39. </ul>
  40. </div>

With Media Lists

  1. <div class="list media-list">
  2. <ul>
  3. <li>
  4. <label class="item-checkbox item-content">
  5. <input type="checkbox" name="demo-media-checkbox" value="1"/>
  6. <i class="icon icon-checkbox"></i>
  7. <div class="item-inner">
  8. <div class="item-title-row">
  9. <div class="item-title">Facebook</div>
  10. <div class="item-after">17:14</div>
  11. </div>
  12. <div class="item-subtitle">New messages from John Doe</div>
  13. <div class="item-text">Lorem ipsum...</div>
  14. </div>
  15. </label>
  16. </li>
  17. <li>
  18. <label class="item-checkbox item-content">
  19. <input type="checkbox" name="demo-media-checkbox" value="2"/>
  20. <i class="icon icon-checkbox"></i>
  21. <div class="item-inner">
  22. <div class="item-title-row">
  23. <div class="item-title">John Doe (via Twitter)</div>
  24. <div class="item-after">17:11</div>
  25. </div>
  26. <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
  27. <div class="item-text">Lorem ipsum...</div>
  28. </div>
  29. </label>
  30. </li>
  31. <li>
  32. <label class="item-checkbox item-content">
  33. <input type="checkbox" name="demo-media-checkbox" value="3"/>
  34. <i class="icon icon-checkbox"></i>
  35. <div class="item-inner">
  36. <div class="item-title-row">
  37. <div class="item-title">Facebook</div>
  38. <div class="item-after">16:48</div>
  39. </div>
  40. <div class="item-subtitle">New messages from John Doe</div>
  41. <div class="item-text">Lorem ipsum...</div>
  42. </div>
  43. </label>
  44. </li>
  45. <li>
  46. <label class="item-checkbox item-content">
  47. <input type="checkbox" name="demo-media-checkbox" value="4"/>
  48. <i class="icon icon-checkbox"></i>
  49. <div class="item-inner">
  50. <div class="item-title-row">
  51. <div class="item-title">John Doe (via Twitter)</div>
  52. <div class="item-after">15:32</div>
  53. </div>
  54. <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
  55. <div class="item-text">Lorem ipsum...</div>
  56. </div>
  57. </label>
  58. </li>
  59. </ul>
  60. </div>