Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="sidebar-cards-archive">
- <ul>
- <li class="cat-item cat-item-12">
- <label>
- <input type="checkbox" name="ofcards-rarity[]" value="12">Common (223)</label>
- </li>
- <li class="cat-item cat-item-14">
- <label>
- <input type="checkbox" name="ofcards-rarity[]" value="14">Epic (40)</label>
- </li>
- <li class="cat-item cat-item-11">
- <label>
- <input type="checkbox" name="ofcards-rarity[]" value="11">Free (83)</label>
- </li>
- <li class="cat-item cat-item-15">
- <label>
- <input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)</label>
- </li>
- <li class="cat-item cat-item-13">
- <label>
- <input type="checkbox" name="ofcards-rarity[]" value="13">Rare (84)</label>
- </li>
- </ul>
- </div>
- @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
- #sidebar-cards-archive ul li {
- list-style: none;
- }
- /*** custom checkboxes ***/
- input[type=checkbox] {
- display:none;
- }
- /* to hide the checkbox itself */
- input[type=checkbox] + label:before {
- font-family: FontAwesome;
- display: inline-block;
- }
- input[type=checkbox] + label:before {
- content:"f096";
- }
- /* unchecked icon */
- input[type=checkbox] + label:before {
- letter-spacing: 10px;
- }
- /* space between checkbox and label */
- input[type=checkbox]:checked + label:before {
- content:"f046";
- }
- /* checked icon */
- input[type=checkbox]:checked + label:before {
- letter-spacing: 5px;
- }
- /* allow space for check mark */
- <input type="checkbox" name="ofcards-rarity[]" value="15">
- <label>Legendary (36)</label> //You will be querying this label css with input + label
- <label>
- <input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)
- </label>
- label>input[type=checkbox] {
- }
- label>input[type=checkbox]:checked {
- }
- label>input[type=checkbox]:before {
- }
- label>input[type=checkbox]:checked:before {
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement