Bagaimana untuk melaksanakan komponen suis mudah dalam css

Sebagai jurutera pembangunan bahagian hadapan, kami selalunya perlu menambah pelbagai suis pada halaman. Hari ini, kami akan menggunakan CSS untuk melaksanakan komponen suis mudah untuk kegunaan masa hadapan dalam projek kami.

Kami boleh melaksanakan suis dalam dua cara. Salah satunya ialah menggunakan komponen siap sedia daripada perpustakaan rangka kerja hadapan. Yang lain ialah menulis sendiri suis menggunakan HTML dan CSS. Kami memilih yang kedua supaya kami lebih memahami prinsip pelaksanaan suis.

Pertama, pada halaman HTML, kita perlu mencipta bekas yang mengandungi suis. Bekas ini boleh menjadi elemen div atau elemen set medan. Dalam bekas ini kita boleh mencipta dua label, satu untuk memaparkan status suis dan satu lagi untuk operasi hidup/mati sebenar.

Sangat mudah untuk melaksanakan suis menggunakan CSS dan HTML Kami hanya perlu menggunakan pemilih input[type="checkbox"] untuk memilih kotak pilihan. Kemudian, kita boleh menentukan gaya suis melalui gaya CSS. Berikut ialah coretan kod HTML ringkas:

<div>
  <label></label>
  <input>
</div>

Kemudian, kita boleh menggunakan gaya CSS untuk menentukan gaya suis, termasuk keadaan suis.

.switch-container {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
}

/* 设置 label 元素样式 */
.switch-container label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease-in-out;
}

/* 设置 switch 元素样式 */
.switch-container input[type="checkbox"] {
  display: none;
}

/* 设置 label 元素 `::before` 伪元素的样式 */
.switch-container label::before {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background-color: #888;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease-in-out;
}

/* 设置 switch 上下面板的样式 */
.switch-container input[type="checkbox"]:checked + label {
  border-color: #2ecc71;
  background-color: #2ecc71;
}

.switch-container input[type="checkbox"]:checked + label::before {
  transform: translateX(16px);
  background-color: #fff;
}

Apakah yang dilakukan oleh coretan kod di atas? Dia mentakrifkan bekas yang mengandungi tag label dan elemen input[type="checkbox"]. Kami kemudian menggunakan gaya CSS untuk menentukan keadaan dan gaya suis. Kami menggunakan elemen pseudo untuk mewakili keadaan hidup dan mati suis dan animasi untuk mensimulasikan pergerakannya.

Di sini kami menetapkan warna untuk keadaan hidup dan mati, tetapi anda boleh menyesuaikannya dengan menukar gaya CSS. Kami juga boleh menambah bayang-bayang pada bekas, menggunakan peluncur dan bukannya bulatan dan banyak lagi.

Akhir sekali, anda hanya perlu menambah kod ini pada tapak web anda untuk menggunakan kawalan suis CSS yang cantik.

Ringkasnya, adalah mudah untuk mengawal keadaan suis menggunakan gaya CSS. Ini ialah penyelesaian yang sangat mudah dan ringan untuk menyesuaikan sepenuhnya gaya suis anda. Jika anda perlu menambah kawalan togol pada tapak web anda, cuba helah mudah tetapi berkuasa ini untuk mendapatkan lebih kawalan ke atas togol dan menyesuaikannya untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan komponen suis mudah dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!