[UI] UI Components : Toggle Switch

DEMO

a

b

c

d

e

f

g

h

i

j

k

l

JS

使用させていただいたのは『jQuery Toggles』。jsは最後に読み込ませる必要あり。

HTML

<div class="toggle on"></div>

CSS

/* -------------------- 基本設定 -------------------- */
.toggle * {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.toggle {
 display: inline-block;
 width: 100px;
 height: 50px;
 font-size: 14px;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off, .toggle-slide .toggle-blob, .toggle-slide .toggle-blob:after {
 float: left;
 transition: all 0.3s ease 0s;
 -webkit-transition: all 0.3s ease 0s;
}
.toggle-slide {
 overflow: hidden;
 cursor: pointer;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
.toggle-slide .toggle-blob {
 position: relative;
 z-index: 99;
 cursor: hand;
 cursor: grab;
 cursor: -moz-grab;
 cursor: -webkit-grab;
}
.toggle-slide .toggle-blob:after {
 content: "";
 position: absolute;
}
/* -------------------- A -------------------- */
.toggle-slide {
 color: #fff;
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #77CF21;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #BD2426;
}
.toggle-slide .toggle-blob:after {
 top: 2px;
 left: 2px;
 width: 46px;
 height: 46px;
 background:#fff;
}
.toggle-slide .toggle-blob:hover:after {
 background: #f3f3f3;
}
/* -------------------- B -------------------- */
.toggle-slide {
 color: #fff;
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #3498DB;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #D6D6D6;
}
.toggle-slide .toggle-blob:after {
 top: 2px;
 left: 2px;
 width: 46px;
 height: 46px;
 background:#fff;
}
.toggle-slide .toggle-blob:hover:after {
 background: #f3f3f3;
}
/* -------------------- C -------------------- */
.toggle-slide {
 border-radius: 3px;
 color: #fff;
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #77CF21;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #BD2426;
}
.toggle-slide .toggle-blob:after {
 top: 2px;
 left: 2px;
 width: 46px;
 height: 46px;
 border-radius: 3px;
 background:#fff;
}
.toggle-slide .toggle-blob:hover:after {
 background: #f3f3f3;
}
/* -------------------- D -------------------- */
.toggle-slide {
 border-radius: 3px;
 color: #fff;
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #3498DB;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #D6D6D6;
}
.toggle-slide .toggle-blob:after {
 top: 2px;
 left: 2px;
 width: 46px;
 height: 46px;
 border-radius: 3px;
 background:#fff;
}
.toggle-slide .toggle-blob:hover:after {
 background: #f3f3f3;
}
/* -------------------- E -------------------- */
.toggle-slide {
 border-radius: 50px;
 color: #fff;
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #77CF21;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #BD2426;
}
.toggle-slide .toggle-blob:after {
 top: 2px;
 left: 2px;
 width: 46px;
 height: 46px;
 border-radius: 50px;
 background:#fff;
}
.toggle-slide .toggle-blob:hover:after {
 background: #f3f3f3;
}
/* -------------------- F -------------------- */
.toggle-slide {
 border-radius: 50px;
 color: #fff;
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #3498DB;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #D6D6D6;
}
.toggle-slide .toggle-blob:after {
 top: 2px;
 left: 2px;
 width: 46px;
 height: 46px;
 border-radius: 50px;
 background:#fff;
}
.toggle-slide .toggle-blob:hover:after {
 background: #f3f3f3;
}
/* -------------------- G -------------------- */
.toggle-slide {
 border-radius: 3px;
 color: #fff;
 text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #77CF21;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #BD2426;
 box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
 -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
}
.toggle-slide .toggle-blob:after {
 top: 1px;
 left: 1px;
 width: 48px;
 height: 48px;
 border-radius: 3px;
 background:#EBEBEB;
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,1) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
}
.toggle-slide .toggle-blob:hover:after {
 background: #F6F6F6;
}
/* -------------------- H -------------------- */
.toggle-slide {
 border-radius: 3px;
 color: #fff;
 text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #3498DB;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #D6D6D6;
 box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
 -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
}
.toggle-slide .toggle-blob:after {
 top: 1px;
 left: 1px;
 width: 48px;
 height: 48px;
 border-radius: 3px;
 background:#EBEBEB;
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,1) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
}
.toggle-slide .toggle-blob:hover:after {
 background: #F6F6F6;
}
/* -------------------- I -------------------- */
.toggle-slide {
 border-radius: 3px;
 color: #fff;
 text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #77CF21;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #BD2426;
 box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
 -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
}
.toggle-slide .toggle-blob {
 border-radius: 3px;
 border:#33353F 1px solid;
 background:#343943;
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255,255,255,.2) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.toggle-slide .toggle-blob:hover {
 background: #33353F;
}
/* -------------------- J -------------------- */
.toggle-slide {
 border-radius: 3px;
 color: #fff;
 text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #3498DB;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #D6D6D6;
 box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
 -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, .5) inset;
}
.toggle-slide .toggle-blob {
 border-radius: 3px;
 border:#33353F 1px solid;
 background:#343943;
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255,255,255,.2) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.toggle-slide .toggle-blob:hover {
 background: #33353F;
}
/* -------------------- K -------------------- */
.toggle-slide {
 border-radius: 50px;
 color: #fff;
 text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #77CF21;
}
.toggle-slide .toggle-on {
 border-radius: 50px 0 0 50px;
}
.toggle-slide .toggle-off {
 border-radius: 0 50px 50px 0;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #BD2426;
 box-shadow:0 1px 3px rgba(0, 0, 0, .5) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5) inset;
}
.toggle-slide .toggle-blob {
 border-radius: 50px;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c2c2c2), color-stop(0.00, #fff));
 background: -webkit-linear-gradient(#fff, #c2c2c2);
 background: -o-linear-gradient(#fff, #c2c2c2);
 background: linear-gradient(#fff, #c2c2c2);
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px rgba(51,51,51,1) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px rgba(51,51,51,1) inset;
}
.toggle-slide .toggle-blob:after {
 top: 5px;
 left: 5px;
 width:40px;
 height:40px;
 border-radius: 50px;
 background:#eee;
}
/* -------------------- L -------------------- */
.toggle-slide {
 border-radius: 50px;
 color: #fff;
 text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}
.toggle > .active .toggle-on, .toggle > .active .toggle-off {
 background: #3498DB;
}
.toggle-slide .toggle-on {
 border-radius: 50px 0 0 50px;
}
.toggle-slide .toggle-off {
 border-radius: 0 50px 50px 0;
}
.toggle-slide .toggle-on, .toggle-slide .toggle-off {
 background: #D6D6D6;
 box-shadow:0 1px 3px rgba(0, 0, 0, .5) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5) inset;
}
.toggle-slide .toggle-blob {
 border-radius: 50px;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c2c2c2), color-stop(0.00, #fff));
 background: -webkit-linear-gradient(#fff, #c2c2c2);
 background: -o-linear-gradient(#fff, #c2c2c2);
 background: linear-gradient(#fff, #c2c2c2);
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px rgba(51,51,51,1) inset;
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px rgba(51,51,51,1) inset;
}
.toggle-slide .toggle-blob:after {
 top: 5px;
 left: 5px;
 width:40px;
 height:40px;
 border-radius: 50px;
 background:#eee;
}

CSS対応状況

• CSS Generated content
• CSS 2.1 selectors
• CSS3 Border-radius
• CSS3 Box-sizing
• CSS3 Transitions
• CSS3 Box-shadow
• CSS Gradients
• CSS3 Text-shadow
• CSS3 Colors