Borang CSS

Dengan menggunakan CSS, boleh mempertahankan penampilan bentuk formulir HTML:

Cuba Sendiri

tetapkan gaya bidang input

使用 width atur lebar bidang input:

实例

input {
  width: 100%;
}

Cuba Sendiri

Contoh di atas untuk semua elemen <input>. Jika hanya mahu menetapkan gaya untuk jenis input tertentu, boleh menggunakan pemilihan atribut:

  • input[type=text] - Pilih hanya bidang teks
  • input[type=password] - Pilih hanya bidang kata laluan
  • input[type=number] - Pilih hanya bidang angka
  • dan lain-lain...

isikan kotak input

使用 padding atur ruang di dalam bidang teks.

提示：Jika terdapat banyak input, mungkin anda perlu menambah marjin untuk menambah ruang di luar mereka:

实例

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Cuba Sendiri

Perhatian, kami telah menetapkan box-sizing atur atribut ini: border-boxini untuk memastikan luas dan tinggi keseluruhan elemen termasuk marjin (isian) dan garisan akhir.

Sila gunakan di Box Sizing CSS dalam bab ini, belajar tentang box-sizing untuk mendapatkan pengetahuan lanjut tentang atribut ini.

kotak input dengan garisan

Sila gunakan border atur ketebalan dan warna garisan, dan gunakan border-radius atur bulatan:

实例

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Cuba Sendiri

Jika hanya memerlukan garisan bawah, sila gunakan border-bottom Atribut:

实例

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Cuba Sendiri

kotak input berwarna

Sila gunakan background-color atur warna latar belakang untuk kotak input, dan gunakan color atur warna teks:

实例

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Cuba Sendiri

kotak input yang mempunyai fokus

Secara lalai, beberapa pelayar akan menambahkan silinder biru di sekeliling kotak input saat memperoleh fokus (klik). Anda boleh menambahkan outline: none; untuk menghapus tindakan ini.

使用 :focus Pemilihan penuh boleh digunakan untuk menetapkan gaya untuk bidang input yang mempunyai fokus:

实例 1

input[type=text]:focus {
  background-color: lightblue;
}

请在文本框中点击：

Cuba Sendiri

实例 2

input[type=text]:focus {
  border: 3px solid #555;
}

请在文本框中点击：

Cuba Sendiri

带有图标/图像的输入框

如果希望在输入框中包含图标，请使用 background-image 属性，并将其与 background-position 属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间：

实例

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

Cuba Sendiri

带动画效果的搜索输入框

在本例中，我们使用 CSS transition 属性为搜索输入框获得焦点时的宽度变化设置动画。稍后，您将在我们的 Transisi CSS 一章中学到更多有关 transition 属性的知识。

实例

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Cuba Sendiri

设置文本域的样式

提示：使用 resize 属性可防止对 textareas 调整大小（禁用右下角的“抓取器”）：

实例

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Cuba Sendiri

设置选择菜单的样式

实例

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Cuba Sendiri

设置输入按钮的样式

实例

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Petikan: Gunakan width: 100% untuk butang yang mempunyai lebar penuh */

Cuba Sendiri

Untuk mendapat maklumat lebih lanjut tentang cara mengatur gaya butang CSS menggunakan CSS, sila belajar dari Butang CSS Panduan.

Menu Berrespons

Sila tetapkan saiz tetingkap editor TIY untuk melihat kesan. Saiz skrin yang kurang daripada 600 piksel, kedua baris akan berlapis vertikal daripada horizontal.

Mahir: Contoh berikut menggunakan Kueri Media Buat formulir berrespons. Dalam bab berikutnya, anda akan belajar lebih banyak tentang penggunaan ini.

Lihat Menu Berrespons