Check Box CSS with SVG img xmln.txt.txt
  1. .todo-list li .toggle {
  2. 	text-align: center;
  3. 	width: 40px;
  4. 	/* auto, since non-WebKit browsers doesn't support input styling */
  5. 	height: auto;
  6. 	position: absolute;
  7. 	top: 0;
  8. 	bottom: 0;
  9. 	margin: auto 0;
  10. 	border: none; /* Mobile Safari */
  11. 	-webkit-appearance: none;
  12. 	appearance: none;
  13. }
  14.  
  15. .todo-list li .toggle:after {
  16. 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ccc" stroke-width="6"/></svg>');
  17. }
  18.  
  19. .todo-list li .toggle:checked:after {
  20. 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
  21. }
  22.