Bagaimana untuk menetapkan saiz kotak pilihan dalam HTML/CSS?-html tutorial-php.cn

Bagaimana untuk menetapkan saiz kotak pilihan dalam HTML/CSS?

WBOY

Lepaskan： 2023-08-30 11:37:13

ke hadapan

1430 orang telah melayarinya

Bagaimana untuk menetapkan saiz kotak pilihan dalam HTML/CSS?

HTML, atau Hypertext Markup Language, digunakan untuk mencipta halaman web dan mentakrifkan struktur dan kandungannya, dan CSS boleh menggayakannya. HTML mempunyai pelbagai elemen yang digunakan untuk membuat halaman web, termasuk borang web.

Kotak pilihan ialah bahagian penting dalam borang web dan antara muka pengguna. Gunakan kotak pilihan apabila anda perlu memilih berbilang pilihan. Secara lalai, kotak semak dalam HTML adalah kecil, yang kadangkala tidak sesuai dengan keperluan reka bentuk. Walau bagaimanapun, kotak pilihan boleh diubah saiz mengikut keperluan anda menggunakan CSS.

Apakah kotak pilihan?

Dalam HTML, kotak semak ialah elemen bentuk yang membolehkan pengguna memilih satu atau lebih pilihan daripada senarai, diwakili oleh kotak kecil. Kotak semak boleh ditandakan atau dinyahtandai, dan status yang ditandakan ditunjukkan dengan tanda semak atau tanda semak di dalam kotak. Kotak pilihan juga dibuat menggunakan teg HTML dan menetapkan atribut jenis kepada kotak pilihan. Contohnya -

<input type="checkbox" id="checkbox" name="checkbox" value="1">
<label for="checkbox-1">Checkbox 1</label>

Salin selepas log masuk

Dalam kod di atas, kami telah membuat kotak pilihan dengan ID, nama dan atribut. Atribut "untuk" pada elemen label sepadan dengan ID kotak pilihan.

Contoh 1

Berikut ialah contoh membuat kotak semak menggunakan HTML.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
   </style>
</head>
<body>
   <h2>Create a Checkbox Using HTML</h2>
   <input type="checkbox" id="checkbox-1" name="checkbox-1" value="1">
   <label for="checkbox-1">Option 1</label>
   <input type="checkbox" id="checkbox-2" name="checkbox-2" value="2">
   <label for="checkbox-2">Option 2</label>
</body>
</html>

Salin selepas log masuk

Tetapkan saiz kotak pilihan

CSS ialah alat yang berkuasa untuk menggayakan elemen HTML. Ia membolehkan kami menukar saiz visual kotak pilihan. Kita boleh menggunakan sifat "lebar" dan "tinggi" untuk menetapkan saiz kotak pilihan. Dengan menggunakan kod CSS berikut, kita boleh menetapkan lebar dan tinggi kotak semak −

input[type=checkbox] {
   width: 30px;
   height: 30px;
}

Salin selepas log masuk

Kod di atas akan menetapkan ketinggian dan lebar kotak pilihan kepada 30 piksel.

Contoh 2

Berikut ialah contoh, menetapkan ketinggian dan lebar kotak pilihan kepada 30 piksel.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      input[type=checkbox] {
         width: 30px;
         height: 30px;
      }
   </style>
</head>
<body>
   <h2>Create a Checkbox Using HTML</h2>
   <input type="checkbox" id="checkbox-1" name="checkbox-1" value="1">
   <label for="checkbox-1">Option 1</label>
   <input type="checkbox" id="checkbox-2" name="checkbox-2" value="2">
   <label for="checkbox-2">Option 2</label>
</body>
</html>

Salin selepas log masuk

Tetapkan gaya kotak semak

Selain menetapkan saiz kotak pilihan, penampilannya juga boleh digayakan dalam CSS. CSS membenarkan pembangun menukar saiz visual kotak pilihan serta mengesan peristiwa klik pada kotak hit. Sebagai contoh, kita boleh menggunakan kod CSS berikut untuk menggayakan kotak pilihan.

input[type=checkbox] {
   -webkit-appearance: none;
   width: 40px;
   height: 40px;
   background-color: red;
   border-radius: 5px;
   border: 3px solid lightgray;
   margin-right: 10px;
}
input[type=checkbox]:checked {
   background-color: lightgreen;
}

Salin selepas log masuk

Dalam kod CSS di atas -

Display − inline-block;
Lebar dan Ketinggian sifat menetapkan saiz kotak pilihan.
warna latar belakang Harta menetapkan warna latar belakang kotak semak.
Jjari-sempadan menjadikan tepi kotak pilihan dibundarkan.
Harta sempadan Tambahkan warna jidar dan jidar pada kotak pilihan.
Margin-right Harta menetapkan jarak antara kotak pilihan dan label.
:Checked Pemilih kelas pseudo digunakan untuk keadaan selepas kotak semak dipilih.
Background-color sifat menukar warna latar belakang kotak pilihan apabila pengguna menyemaknya.

Contoh 3

Ini ialah contoh kod lengkap untuk menggayakan kotak pilihan.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      input[type=checkbox] {
         -webkit-appearance: none;
         display: inline-block;
         width: 40px;
         height: 40px;
         background-color: red;
         border-radius: 5px;
         border: 3px solid lightgray;
         margin-right: 10px;
      }
      input[type=checkbox]:checked {
         background-color: lightgreen;
      }
   </style>
</head>
<body>
   <h2>Create a Checkbox Using HTML</h2>
   <input type="checkbox" id="checkbox-1" name="checkbox-1" value="1">
   <label for="checkbox-1">Option 1</label>
   <input type="checkbox" id="checkbox-2" name="checkbox-2" value="2">
   <label for="checkbox-2">Option 2</label>
</body>
</html>

Salin selepas log masuk

KESIMPULAN

Di sini, kami membincangkan cara menetapkan saiz kotak pilihan dalam HTML dan CSS. Kaedah HTML hanya mengubah saiz visual kotak semak, manakala kaedah CSS membenarkan pembangun menukar kotak klik juga. Dengan menggunakan CSS, kami juga boleh menggayakan kotak pilihan untuk menjadikannya lebih menarik secara visual dan mesra pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan saiz kotak pilihan dalam HTML/CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!