이 글은 CSS3를 사용하여 스위치 컴포넌트를 구현하는 방법에 대한 관련 정보를 주로 소개합니다. 편집자는 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.
Form-based checkbox
Rendering
Principle
체크박스를 선택하면(:선택) 스타일을 변경하면 됩니다. 기본 스타일, 모양: 없음 이 문서의 코드는 Chrome에서만 실행됩니다. 호환성 코드를 작성해야 하는 경우 모양 및 전환에 접두사를 추가하면 됩니다.
<input class='switch-component' type='checkbox'>
// switch组件 .switch-component { position: relative; width: 60px; height: 30px; background-color: #dadada; border-radius: 30px; border: none; outline: none; -webkit-appearance: none; transition: all .2s ease; } // 按钮 switch-component::after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: #fff; border-radius: 50%; transition: all .2s ease; } // checked状态时,背景颜色改变 .switch-component:checked { background-color: #86c0fa; } // checked状态时,按钮位置改变 .switch-component:checked::after { left: 50%; }
위 내용은 CSS3을 사용하여 스위치 구성요소 전환 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!