switchbutton.css 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. .switchbutton {
  2. text-decoration: none;
  3. display: inline-block;
  4. overflow: hidden;
  5. vertical-align: middle;
  6. margin: 0;
  7. padding: 0;
  8. cursor: pointer;
  9. background: #1a7bc9;
  10. border: 1px solid #1a7bc9;
  11. -moz-border-radius: 0px 0px 0px 0px;
  12. -webkit-border-radius: 0px 0px 0px 0px;
  13. border-radius: 0px 0px 0px 0px;
  14. }
  15. .switchbutton-inner {
  16. display: inline-block;
  17. overflow: hidden;
  18. position: relative;
  19. top: -1px;
  20. left: -1px;
  21. }
  22. .switchbutton-on,
  23. .switchbutton-off,
  24. .switchbutton-handle {
  25. display: inline-block;
  26. text-align: center;
  27. height: 100%;
  28. float: left;
  29. font-size: 12px;
  30. -moz-border-radius: 0px 0px 0px 0px;
  31. -webkit-border-radius: 0px 0px 0px 0px;
  32. border-radius: 0px 0px 0px 0px;
  33. }
  34. .switchbutton-on {
  35. background: #6caef5;
  36. color: #fff;
  37. }
  38. .switchbutton-off {
  39. background-color: #fafafa;
  40. color: #404040;
  41. }
  42. .switchbutton-on,
  43. .switchbutton-reversed .switchbutton-off {
  44. -moz-border-radius: 0px 0 0 0px;
  45. -webkit-border-radius: 0px 0 0 0px;
  46. border-radius: 0px 0 0 0px;
  47. }
  48. .switchbutton-off,
  49. .switchbutton-reversed .switchbutton-on {
  50. -moz-border-radius: 0 0px 0px 0;
  51. -webkit-border-radius: 0 0px 0px 0;
  52. border-radius: 0 0px 0px 0;
  53. }
  54. .switchbutton-handle {
  55. position: absolute;
  56. top: 0;
  57. left: 50%;
  58. background-color: #fafafa;
  59. color: #404040;
  60. border: 1px solid #1a7bc9;
  61. -moz-box-shadow: 0 0 3px 0 #1a7bc9;
  62. -webkit-box-shadow: 0 0 3px 0 #1a7bc9;
  63. box-shadow: 0 0 3px 0 #1a7bc9;
  64. }
  65. .switchbutton-value {
  66. position: absolute;
  67. top: 0;
  68. left: -5000px;
  69. }
  70. .switchbutton-disabled {
  71. opacity: 0.5;
  72. filter: alpha(opacity=50);
  73. }
  74. .switchbutton-disabled,
  75. .switchbutton-readonly {
  76. cursor: default;
  77. }