Bagaimanakah Saya Boleh Menggayakan Butang Radio untuk Kelihatan Seperti Butang Hanya Menggunakan CSS?

Menggantikan Butang Radio dengan Elemen Seperti Butang

Butang radio biasanya digunakan dalam borang untuk pemilihan pengguna. Walau bagaimanapun, menyesuaikan penampilan mereka untuk meniru butang biasa boleh meningkatkan antara muka pengguna.

Menggunakan CSS untuk Mengubah Butang Radio

Anda boleh mencapai transformasi ini semata-mata dengan CSS, menghapuskan keperluan untuk rangka kerja luaran. Struktur HTML yang dikemas kini kekal tidak berubah, mengekalkan kefungsiannya.

HTML Markup

HTML untuk borang derma kekal sama, terdiri daripada:

• A
  senarai untuk pilihan butang radio
  • item yang mengandungi butang radio dan labelnya

  Penggayaan CSS

  Kod CSS berikut akan mengubah butang radio menjadi elemen seperti butang:

  .donate-now {
    list-style-type: none;
    margin: 25px 0 0 0;
    padding: 0;
  }
  
  .donate-now li {
    float: left;
    margin: 0 5px 0 0;
    width: 100px;
    height: 40px;
    position: relative;
  }
  
  .donate-now label,
  .donate-now input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .donate-now input[type="radio"] {
    opacity: 0.01;
    z-index: 100;
  }
  
  .donate-now input[type="radio"]:checked+label,
  .Checked+label {
    background: yellow;
  }
  
  .donate-now label {
    padding: 5px;
    border: 1px solid #CCC;
    cursor: pointer;
    z-index: 90;
  }
  
  .donate-now label:hover {
    background: #DDD;
  }

  Cara Ia Berfungsi

  • Ia meletakkan kedua-dua butang radio dan elemen label sepenuhnya dalam
  • item.
  • Kelegapan butang radio ditetapkan kepada 0.01, menjadikannya tersembunyi secara visual.
  • Apabila butang radio ditanda, label terpautnya diserlahkan dengan latar belakang kuning.
  • Kesan tuding pada label dikekalkan.

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