inputswitch-alt.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. /* Input switch alternate */
  2. div.switch-toggle {
  3. display: block;
  4. height: 24px;
  5. width: 48px;
  6. position: relative;
  7. cursor: pointer;
  8. background: #fff;
  9. box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
  10. -webkit-transition: all .2s ease;
  11. -moz-transition: all .2s ease;
  12. -o-transition: all .2s ease;
  13. transition: all .2s ease;
  14. border-radius: 50px;
  15. }
  16. div.switch-toggle:after {
  17. content: '';
  18. display: block;
  19. height: 18px;
  20. width: 18px;
  21. background: #fff;
  22. position: absolute;
  23. top: 3px;
  24. left: 3px;
  25. border-radius: 50px;
  26. box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  27. -webkit-transition: all .2s ease;
  28. -moz-transition: all .2s ease;
  29. -o-transition: all .2s ease;
  30. transition: all .2s ease;
  31. }
  32. div.switch-toggle:before {
  33. content: '';
  34. position: absolute;
  35. right: 1px;
  36. top: 12px;
  37. color: #fff;
  38. }
  39. div.switch-toggle:hover:after {
  40. left: 5px;
  41. }
  42. div.switch-toggle.switch-on:before {
  43. content: '';
  44. right: 40px;
  45. }
  46. .switch-toggle.switch-on {
  47. background: #0c0;
  48. }
  49. div.switch-toggle.switch-on:after {
  50. left: 26px;
  51. }
  52. div.switch-toggle.switch-on:hover:after {
  53. left: 24px;
  54. }