Jak zrobic taki efekt ze po najechaniu na checkbox jego border zmienic?

Mam cos takiego:

  1. label {
  2. -webkit-touch-callout: none;
  3. -webkit-user-select: none;
  4. -khtml-user-select: none;
  5. -moz-user-select: none;
  6. -ms-user-select: none;
  7. user-select: none;
  8. }
  9.  
  10. input[type=checkbox].css-checkbox {
  11. position: absolute;
  12. overflow: hidden;
  13. clip: rect(0 0 0 0);
  14. height:1px;
  15. width:1px;
  16. margin:-1px;
  17. padding:0;
  18. border:0;
  19. }
  20.  
  21. input[type=checkbox].css-checkbox + label.css-label {
  22. padding-left:20px;
  23. height:20px;
  24. display:inline-block;
  25. line-height:15px;
  26. background-repeat:no-repeat;
  27. background-position: 0 0;
  28. font-size:15px;
  29. vertical-align:middle;
  30. cursor:pointer;
  31. float: right;
  32. }
  33.  
  34. input[type=checkbox].css-checkbox:checked + label.css-label {
  35. background-image:url(../img/hover-checked.png);
  36. }
  37. .css-label{
  38. background-image:url(../img/checkbox.png);
  39. }
  40.  
  41. <input type="checkbox" class="css-checkbox" id="checkbox1">
  42. <label for="checkbox1" name="checkbox1_lbl" class="css-label lite-green-check"></label>