Advertisement
decembre

CSS - CHECKBOX v.1

May 8th, 2016
135
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.78 KB | None | 0 0
  1.  
  2.  
  3. ============================
  4. ======== CSS - CHECKBOX v.1 - POSTé
  5. ============================
  6.  
  7. CSS - CHECKBOX
  8. == http://css-tricks.com/the-checkbox-hack/
  9. == ADD THEM - with GM - https://www.google.fr/search?q=add+checkbox+to+links+greasemonkey&ie=utf-8&oe=utf-8&rls=org.mozilla:fr-FR:official&client=firefox-a&gws_rd=cr
  10.  
  11.  
  12. ============================
  13. =========== CSS Checkbox hack
  14. == http://tympanus.net/codrops/2012/12/17/css-click-events/
  15. == http://tympanus.net/Tutorials/CSSClickEvents/index.html (example)
  16. Clicking on the label will check a hidden checkbox.
  17. Once checked, the elements with the .to-be-changed class will become red.
  18.  
  19. Re-clicking the label will uncheck the checkbox, restoring the default color of the .to-be-changed elements.
  20.  
  21. ==Checkbox hack
  22.  
  23. Aaaaah, the checkbox hack. What a thing my friends! I’m sure you’ve all heard about the checkbox hack before.
  24. It’s probably the most common way to handle a click event in CSS. It relies on, well, a checkbox.
  25.  
  26. What’s cool about a checkbox is the fact that it’s binary. It’s either checked or not checked.
  27. There is no “half-way” checked. This is why the checkbox hack is
  28. a pretty reliable way to trigger a click event in CSS. Let’s make an example.
  29. How it works
  30.  
  31. The HTML
  32.  
  33. <input type="checkbox">
  34. <p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
  35.  
  36. The CSS
  37.  
  38. .to-be-changed {
  39. color: black;
  40. }
  41.  
  42. input[type=checkbox]:checked ~ .to-be-changed {
  43. color: red;
  44. }
  45.  
  46. As you can see, it relies on the :checked pseudo-class and on the general sibling selector ~.
  47. Please note that it also works like a charm with the adjacent sibling selector +.
  48. Basically, it says “if the checkbox is checked, then the following elements with the .to-be-changed class will be red”.
  49.  
  50. Okay, a checkbox isn’t very sexy, but you can totally make something nicer by hiding
  51. the checkbox and binding a label to it. Something like this maybe:
  52.  
  53. <input type="checkbox" id="toggle">
  54. <label for="toggle">Click me!</label>
  55. <p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
  56.  
  57. So we hide the checkbox and use the label to trigger the click event.
  58.  
  59. input[type=checkbox] {
  60. position: absolute;
  61. top: -9999px;
  62. left: -9999px;
  63. }
  64.  
  65. label {
  66. display: block;
  67. background: #08C;
  68. padding: 5px;
  69. border: 1px solid rgba(0,0,0,.1);
  70. border-radius: 2px;
  71. color: white;
  72. font-weight: bold;
  73. }
  74.  
  75. input[type=checkbox]:checked ~ .to-be-changed {
  76. color: red;
  77. }
  78.  
  79. This way, you have some kind of button triggering the color change on the paragraph.
  80. Isn’t that cool? Re-clicking on the button is switching the color back to black of course.
  81.  
  82. (Note that there are different possibilities for hiding the checkbox, the most obvious of all being display:none.)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement