daily pastebin goal
46%
SHARE
TWEET

Untitled

a guest Oct 12th, 2017 54 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div id="sidebar-cards-archive">
  2. <ul>
  3.     <li class="cat-item cat-item-12">
  4.         <label>
  5.             <input type="checkbox" name="ofcards-rarity[]" value="12">Common (223)</label>
  6.     </li>
  7.     <li class="cat-item cat-item-14">
  8.         <label>
  9.             <input type="checkbox" name="ofcards-rarity[]" value="14">Epic (40)</label>
  10.     </li>
  11.     <li class="cat-item cat-item-11">
  12.         <label>
  13.             <input type="checkbox" name="ofcards-rarity[]" value="11">Free (83)</label>
  14.     </li>
  15.     <li class="cat-item cat-item-15">
  16.         <label>
  17.             <input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)</label>
  18.     </li>
  19.     <li class="cat-item cat-item-13">
  20.         <label>
  21.             <input type="checkbox" name="ofcards-rarity[]" value="13">Rare (84)</label>
  22.     </li>
  23. </ul>
  24. </div>
  25.    
  26. @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
  27.  #sidebar-cards-archive ul li {
  28.      list-style: none;
  29.  }
  30.  /*** custom checkboxes ***/
  31.  input[type=checkbox] {
  32.      display:none;
  33.  }
  34.  /* to hide the checkbox itself */
  35.  input[type=checkbox] + label:before {
  36.      font-family: FontAwesome;
  37.      display: inline-block;
  38.  }
  39.  input[type=checkbox] + label:before {
  40.      content:"f096";
  41.  }
  42.  /* unchecked icon */
  43.  input[type=checkbox] + label:before {
  44.      letter-spacing: 10px;
  45.  }
  46.  /* space between checkbox and label */
  47.  input[type=checkbox]:checked + label:before {
  48.      content:"f046";
  49.  }
  50.  /* checked icon */
  51.  input[type=checkbox]:checked + label:before {
  52.      letter-spacing: 5px;
  53.  }
  54.  /* allow space for check mark */
  55.    
  56. <input type="checkbox" name="ofcards-rarity[]" value="15">
  57. <label>Legendary (36)</label> //You will be querying this label css with input + label
  58.    
  59. <label>
  60.             <input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)
  61. </label>
  62.    
  63. label>input[type=checkbox] {
  64.  
  65. }
  66. label>input[type=checkbox]:checked {
  67.  
  68. }
  69.    
  70. label>input[type=checkbox]:before {
  71.  
  72. }
  73. label>input[type=checkbox]:checked:before {
  74.  
  75. }
RAW Paste Data
Top