borang tetapan css

Dengan populariti Internet dan peranti mudah alih, borang telah menjadi salah satu elemen yang paling biasa digunakan dalam tapak web dan aplikasi. Borang boleh mengumpul maklumat asas pengguna, menjalankan carian, menyerahkan kandungan, dsb., dan telah menjadi bahagian yang sangat penting dalam reka bentuk interaksi dan reka bentuk pengalaman pengguna. Tetapan gaya yang betul juga boleh meningkatkan kebolehgunaan dan estetika borang dengan banyak, sekali gus meningkatkan kepuasan pengguna dan kadar penukaran. Artikel ini akan memperkenalkan cara menggunakan CSS untuk menggayakan borang.

1. Struktur asas borang

Dalam HTML, borang biasanya terdiri daripada teg borang dan satu siri input, pilih, kawasan teks dan kawalan borang lain. Berikut ialah struktur bentuk yang paling mudah:

<form>
  <label>用户名：<input type="text" name="username"></label>
  <label>密码：<input type="password" name="password"></label>
  <input type="submit" value="提交">
</form>

Antaranya, tag label digunakan untuk mengaitkan kawalan borang dan teks penerangan borang, atribut jenis menentukan jenis kawalan dan atribut nama digunakan untuk menamakan apabila menyerahkan. data bentuk.

2. Tetapan gaya biasa untuk borang

1. Fon seragam dan saiz fon

Menentukan fon dan saiz fon kawalan borang dalam gaya boleh membuat bentuk kelihatan kemas dan konsisten, meningkatkan kebolehbacaan dan estetika. Contoh kod adalah seperti berikut:

form {
  font-family: Arial, san-serif;
  font-size: 14px;
}

2. Alih keluar rupa lalai dan sempadan

Kebanyakan penyemak imbas datang dengan beberapa rupa dan sempadan untuk kawalan borang, dan gaya lalai ini tidak Ia mungkin tidak memenuhi keperluan reka bentuk kami. Untuk mengalih keluar rupa lalai dan jidar ini, anda boleh menggunakan kod berikut:

input[type=text], input[type=password], textarea {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background-color: #f5f5f5;
  padding: 5px;
}

Sifat rupa dan -webkit-penampilan CSS digunakan di sini untuk menetapkan rupa bentuk kepada tiada dan mengalih keluar sempadan dan garis besar . Ditambah warna latar belakang dan padding.

3. Tetapkan lebar kotak teks dan kotak kata laluan

Secara lalai, lebar kotak teks dan kotak kata laluan adalah adaptif mengikut kandungan. Untuk menjadikan bentuk lebih kemas secara visual, kita boleh menetapkan lebar kepada nilai tetap, seperti 300 piksel. Contoh kod adalah seperti berikut:

input[type=text], input[type=password], textarea {
  width: 300px;
}

4. Laraskan gaya kotak lungsur turun

Kemunculan lalai kotak lungsur turun mungkin tidak memenuhi keperluan kami. Anda boleh melaraskan gaya melalui kod berikut:

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 960'><path d='M870.4 358.4l-358.4 358.4-358.4-358.4c-19.2-19.2-51.2-19.2-70.4 0-19.2 19.2-19.2 51.2 0 70.4l384 384c9.6 9.6 22.4 14.4 35.2 14.4s25.6-4.8 35.2-14.4l384-384c19.2-19.2 19.2-51.2 0-70.4-19.2-19.2-51.2-19.2-70.4 0z'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 20px;
  padding-right: 25px;
}

Di sini, tetapkan rupa dan -webkit-penampilan kepada tiada, alih keluar rupa lalai, kemudian gunakan CSS untuk mencipta imej latar belakang untuk anak panah kotak lungsur, dan akhirnya gunakan imej latar belakang, ulangan latar belakang, kedudukan latar belakang dan latar belakang- Atribut saiz menggunakannya pada kotak lungsur.

5. Reka bentuk gaya butang hantar

Butang hantar ialah bahagian paling penting dalam borang, dan ia biasanya perlu direka bentuk untuk membezakannya daripada butang biasa. Anda boleh menggunakan kod berikut untuk menetapkan gaya:

input[type=submit] {
  background-color: #01aef0;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

Di sini, warna latar belakang butang ditetapkan kepada #01aef0, warna latar depan ditetapkan kepada putih, sempadan dikeluarkan, sudut bulat dan pelapik ditetapkan, dan saiz fon ditetapkan kepada 16 piksel, dan akhirnya gunakan atribut kursor untuk menukar kursor kepada bentuk tangan untuk meningkatkan interaktiviti butang.

3. Ringkasan

Dalam pembangunan bahagian hadapan dan reka bentuk web, borang sudah pasti elemen yang sangat penting, dan tetapan gaya yang betul boleh meningkatkan kebolehgunaan dan keindahan borang, menjadikannya ia lebih mudah bagi pengguna untuk Kedua-dua pengalaman dan penukaran memainkan peranan yang sangat penting. Artikel ini memperkenalkan tetapan gaya bentuk yang biasa digunakan dalam CSS Setiap gaya adalah seperti alat bebas apabila digunakan secara bersendirian Walau bagaimanapun, dalam aplikasi sebenar, ia juga perlu digabungkan secara fleksibel mengikut situasi sebenar untuk membentuk gaya bentuk yang lengkap. keperluan reka bentuk.

Atas ialah kandungan terperinci borang tetapan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!