1.flipswitch {
2  position: relative;
3  width: 86px;
4}
5
6.flipswitch input[type=checkbox] {
7  display: none;
8}
9
10.flipswitch-label {
11  display: block;
12  overflow: hidden;
13  cursor: pointer;
14  border: 1px solid #999999;
15  border-radius: 8px;
16}
17
18.flipswitch-inner {
19  width: 200%;
20  margin-left: -100%;
21  transition: margin 0.3s ease-in 0s;
22}
23
24.flipswitch-inner:before, .flipswitch-inner:after {
25  float: left;
26  width: 50%;
27  height: 24px;
28  padding: 0;
29  line-height: 24px;
30  font-size: 18px;
31  color: white;
32  font-family: Trebuchet, Arial, sans-serif;
33  font-weight: bold;
34  box-sizing: border-box;
35}
36
37.flipswitch-inner:before {
38  content: "ON";
39  padding-left: 12px;
40  background-color: #256799;
41  color: #FFFFFF;
42}
43
44.flipswitch-inner:after {
45  content: "OFF";
46  padding-right: 12px;
47  background-color: #EBEBEB;
48  color: #888888;
49  text-align: right;
50}
51
52.flipswitch-switch {
53  width: 31px;
54  margin: -3.5px;
55  background: #FFFFFF;
56  border: 1px solid #999999;
57  border-radius: 8px;
58  position: absolute;
59  top: 0;
60  bottom: 0;
61  right: 59px;
62  transition: all 0.3s ease-in 0s;
63}
64
65.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
66  margin-left: 0;
67}
68
69.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
70  right: 0;
71}
72