CSS로만 제작된 팔꿈치 버튼
9253 단어 HTML팔꿈치 마디 단추ToggleButtonCSS
개요
이 글은 CSS를 사용하여 팔꿈치 버튼 (또는 스위치) 만 만듭니다.설계는 다음과 같다.
스위치 부분은 복선상자로 만들고, 원형 단추는':after'와':before'위조 요소로 만듭니다.완성하고 찾아보니 Qiita에 같은 투고가 많은데 열심히 만들었기 때문에 공양을 해야 돼요.
소스 코드
HTML
<label
><input type="checkbox" checked
><span>ON</span
><span>OFF</span
></label>
CSS
/* ---- 共通部 ---- */
input[type=checkbox] {
display: none;
}
label>input[type=checkbox]~span {
display: flex;
justify-content: space-between;
align-items: center;
width: 90px;
height: 28px;
font-size: 14px;
border-style: none;
border-radius: 15px; // =(丸ボタンのサイズ÷2)+(丸ボタンのmargin)
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
/* ---- スイッチがONのとき ---- */
label>input[type=checkbox]:checked+span {
display: flex;
/* ---- ボタンのデザイン ---- */
padding-left: 8px;
color: white;
background-color: dodgerblue;
}
label>input[type=checkbox]:checked+span+span {
display: none;
}
/* ---- スイッチがOFFのとき ---- */
label>input[type=checkbox]+span {
display: none;
}
label>input[type=checkbox]+span+span {
display: flex;
/* ---- ボタンのデザイン ---- */
padding-right: 8px;
color: gray;
background-color: lightgray;
}
/* ---- 丸ボタンのデザイン ---- */
label>input[type=checkbox]:checked+span::after, label>input[type=checkbox]+span+span::before {
display: block;
vertical-align: middle;
width: 24px;
height: 24px;
margin: 3px;
border-radius: 50%;
background-color: white;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
content: "";
}
Reference
이 문제에 관하여(CSS로만 제작된 팔꿈치 버튼), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/lookman/items/ec0d524639e43dcca0c0
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
HTML
<label
><input type="checkbox" checked
><span>ON</span
><span>OFF</span
></label>
CSS
/* ---- 共通部 ---- */
input[type=checkbox] {
display: none;
}
label>input[type=checkbox]~span {
display: flex;
justify-content: space-between;
align-items: center;
width: 90px;
height: 28px;
font-size: 14px;
border-style: none;
border-radius: 15px; // =(丸ボタンのサイズ÷2)+(丸ボタンのmargin)
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
/* ---- スイッチがONのとき ---- */
label>input[type=checkbox]:checked+span {
display: flex;
/* ---- ボタンのデザイン ---- */
padding-left: 8px;
color: white;
background-color: dodgerblue;
}
label>input[type=checkbox]:checked+span+span {
display: none;
}
/* ---- スイッチがOFFのとき ---- */
label>input[type=checkbox]+span {
display: none;
}
label>input[type=checkbox]+span+span {
display: flex;
/* ---- ボタンのデザイン ---- */
padding-right: 8px;
color: gray;
background-color: lightgray;
}
/* ---- 丸ボタンのデザイン ---- */
label>input[type=checkbox]:checked+span::after, label>input[type=checkbox]+span+span::before {
display: block;
vertical-align: middle;
width: 24px;
height: 24px;
margin: 3px;
border-radius: 50%;
background-color: white;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
content: "";
}
Reference
이 문제에 관하여(CSS로만 제작된 팔꿈치 버튼), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/lookman/items/ec0d524639e43dcca0c0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)