iPhoneのON,OFFスイッチのようなトグルスイッチを作ってみた
CSSを使ってトグルスイッチの作り方
早速だけどコード
See the Pen zYGoYex by yamazaki (@y_m_z_k) on CodePen.
構成
HTML
HTMLはシンプルにチェックボックスとラベルのみ。
<div class="switch">
<input type="checkbox" id="toggle" class="toggle" />
<label for="toggle"></label>
</div>
CSS
CSSがメインとなる。
.switch {
margin-top: 4px;
margin-left: 2px;
font-size:24px;
padding: 2px;
}
.switch input[type=checkbox]{
position: absolute;
opacity: 0;
}
.switch label {
width: 2em;
height: 2em;
position: relative;
cursor: pointer;
display: block;
}
.switch label:before {
content: '';
position: absolute;
width: 2em;
height: 1em;
left: 0.1em;
transition: background 0.1s ease;
background: #f1f1f1;
border-radius: 50px;
box-shadow: inset 0px 1px 1px rgba(171,66,63,0.5);
}
.switch label:after {
content:'';
position: absolute;
width: 1em;
height: 1em;
border-radius: 50px;
left: 0;
transition : all 0.2s ease;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
animation: swich-off .2s ease-out;
z-index:2;
}
.switch input[type=checkbox]:checked+label:before {
background:#8ce196;
box-shadow: inset 0px 1px 1px rgba(84,152,140,0.5);
}
.switch input[type=checkbox]:checked+label:after {
animation: switch-on .2s ease-out;
left: 1.1em;
}
ポイント
CSSで何やっているかわからないかもしれないが、
重要なのは元のチェックボックスは非表示にして:beforeと:afterの疑似要素で表現していること
疑似要素とはCSSでHTMLの要素のようなものを表現できる。
contentプロパティによって文などを追加できる。
最後に
CSSで分かりやすいデザインを作るのは楽しいのでとりあえず最初になじみのあるこの実装に取り組んでみました。
完成した時は感動しました。。。
他にも簡単に作れるものがあれば教えてください。
Author And Source
この問題について(iPhoneのON,OFFスイッチのようなトグルスイッチを作ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/masakym/items/28e5e1f56d0ecf35af11著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .