Bagaimanakah Saya Boleh Menggayakan Butang Radio dengan CSS?

Menggayakan Butang Radio dengan CSS

Memperibadikan penampilan butang radio melangkaui fungsi asasnya. Untuk mengubah suai penggayaan mereka, termasuk kedua-dua bentuk dan titik penunjuk, CSS menawarkan beberapa kemungkinan.

Satu penyelesaian ialah menggunakan kelas pseudo :selepas untuk menindih gaya tersuai di atas input butang radio. Dengan mentakrifkan saiz, kedudukan, bentuk dan warna dengan teliti, pembangun boleh mencipta butang radio yang diperibadikan.

Sebagai contoh, kod CSS berikut mengubah suai rupa butang radio:

input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #d1d3d1;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid white;
}

input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #ffa500;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid white;
}

Menggunakan kod ini, anda boleh menggunakan warna dan bentuk yang berbeza dengan mudah pada kedua-dua bentuk butang radio dan titik penunjuk, memberikan kawalan borang anda yang lebih halus dan disesuaikan tengok.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Butang Radio dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!