CSS3을 사용하여 스위치 구성요소 전환 구현

이 글은 CSS3를 사용하여 스위치 컴포넌트를 구현하는 방법에 대한 관련 정보를 주로 소개합니다. 편집자는 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

Form-based checkbox

Rendering

Principle

체크박스를 선택하면(:선택) 스타일을 변경하면 됩니다. 기본 스타일, 모양: 없음 이 문서의 코드는 Chrome에서만 실행됩니다. 호환성 코드를 작성해야 하는 경우 모양 및 전환에 접두사를 추가하면 됩니다.

<input class=&#39;switch-component&#39; type=&#39;checkbox&#39;>

css code

// 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에서 스위치 사용에 대한 자세한 설명

JS는 스위치를 사용하여 삼항 연산과 속성 연산의 코드 공유를 결정합니다

위 내용은 CSS3을 사용하여 스위치 구성요소 전환 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!