switchbutton.css 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  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: #bbb;
  10. border: 1px solid #bbb;
  11. -moz-border-radius: 5px 5px 5px 5px;
  12. -webkit-border-radius: 5px 5px 5px 5px;
  13. border-radius: 5px 5px 5px 5px;
  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: 5px 5px 5px 5px;
  31. -webkit-border-radius: 5px 5px 5px 5px;
  32. border-radius: 5px 5px 5px 5px;
  33. }
  34. .switchbutton-on {
  35. background: #0081c2;
  36. color: #fff;
  37. }
  38. .switchbutton-off {
  39. background-color: #ffffff;
  40. color: #333;
  41. }
  42. .switchbutton-on,
  43. .switchbutton-reversed .switchbutton-off {
  44. -moz-border-radius: 5px 0 0 5px;
  45. -webkit-border-radius: 5px 0 0 5px;
  46. border-radius: 5px 0 0 5px;
  47. }
  48. .switchbutton-off,
  49. .switchbutton-reversed .switchbutton-on {
  50. -moz-border-radius: 0 5px 5px 0;
  51. -webkit-border-radius: 0 5px 5px 0;
  52. border-radius: 0 5px 5px 0;
  53. }
  54. .switchbutton-handle {
  55. position: absolute;
  56. top: 0;
  57. left: 50%;
  58. background-color: #ffffff;
  59. color: #333;
  60. border: 1px solid #bbb;
  61. -moz-box-shadow: 0 0 3px 0 #bbb;
  62. -webkit-box-shadow: 0 0 3px 0 #bbb;
  63. box-shadow: 0 0 3px 0 #bbb;
  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. }