css3はスイッチコンポーネントスイッチを実装します

この記事では、css3 を使用して switch コンポーネントを実装する方法に関する関連情報を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

フォームベースのチェックボックス

レンダリング

原則

チェックボックスには、チェックされていない状態と選択されている状態の2つの状態があり、まず、ブラウザのスタイルを変更する必要があります。デフォルトのスタイル、外観: なし。この記事のコードは Chrome でのみ実行されます。互換性コードを記述する必要がある場合は、外観と遷移に接頭辞を追加するだけです

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

css コード

// 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%;
 }

。関連する推奨事項:

WeChat アプレット スイッチ コンポーネントの詳細な紹介

以上がcss3はスイッチコンポーネントスイッチを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。