CSS Forms

通过使用 CSS，可以极大地改善 HTML 表单的外观：

亲自试一试

设置输入字段的样式

ການນໍາໃຊ້ width 属性来确定输入字段的宽度：

ຄວາມຄິດ

input {
  width: 100%;
}

亲自试一试

上例适用于所有 元素。如果只想设置特定输入类型的样式，则可以使用属性选择器：

  • input[type=text] - 将仅选择文本字段
  • input[type=password] - 将仅选择密码字段
  • input[type=number] - 将仅选择数字字段
  • 等等...

填充输入框

ການນໍາໃຊ້ padding 属性在文本字段内添加空间。

ຄຳແນະນຳ:若有很多输入，那么您可能还需要添加外边距，以便在它们之外添加更多空间：

ຄວາມຄິດ

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

亲自试一试

请注意，我们已将 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框。

请在在我们的 ຫົວຂໍ້: ການສະແດງ CSS Box Sizing 这一章中学习有关 box-sizing 属性的更多知识。

ບານຄົນຄູ່ມືທີ່ມີວົງວອກ

ທ່ານສາມາດໃຊ້ border ທີ່ຈະປ່ຽນຄວາມເຂັມຂອງວົງວອກແລະສີວົງວອກຫຼັງຈາກໃຊ້ border-radius ທີ່ຈະໃຫ້ມີວົງວອກທີ່ມີວົງວອກທີ່ມີວົງວອກທີ່ດ້ານລຸ່ມ:

ຄວາມຄິດ

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

亲自试一试

ຖ້າພຽງແຕ່ຕ້ອງການວົງວອກທີ່ດ້ານລຸ່ມຈະໃຊ້ border-bottom ທີ່ຈະປ່ຽນການຈັດຕັ້ງວົງວອກ:

ຄວາມຄິດ

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

亲自试一试

ບານຄົນຄູ່ມືສີສີ່ຫຼັກ

ທ່ານສາມາດໃຊ້ background-color ທີ່ຈະໃຫ້ບານຄົນຄູ່ມືມີສີທີ່ຫຼັກຂອງຂໍ້ຄວາມຫຼັງຈາກໃຊ້ color ທີ່ຈະປ່ຽນສີຫຼັກຂອງຂໍ້ຄວາມ:

ຄວາມຄິດ

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

亲自试一试

ບານຄົນຄູ່ມືທີ່ໄລ່ນຳ

ໂດຍປົກກະຕິໃນບາງສາຍທໍລະທັດຈະໃຫ້ມີວົງວອກສີຟີກສະຫຼົກທາງອ້ອມບານຄົນຄູ່ມືທີ່ໄລ່ນຳ(ຄຳດຽວ): ທ່ານສາມາດໃຊ້ບາງວິທີທີ່ມີຢູ່ໃນບານຄົນຄູ່ມືໃຫ້ໄລ່ນຳ: outline: none; ທີ່ຈະຫຼຸດອອກການກະທຳນີ້.

ການນໍາໃຊ້ :focus ຄົນຄູ່ມືການໄລ່ນຳໃຫ້ມີຮູບແບບຕາມການໄລ່ນຳໃນບາງບານຄົນຄູ່ມື:

ກໍລະນີ 1

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

ການກົດດັງໃນບະບັດແບບຂັບເຄື່ອງ

亲自试一试

ກໍລະນີ 2

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

ການກົດດັງໃນບະບັດແບບຂັບເຄື່ອງ

亲自试一试

ການກົດດັງໃນບະບັດແບບຂັບເຄື່ອງ

ບະບັດແບບຂັບເຄື່ອງທີ່ມີພາບ/ພາບພິມ ຖ້າພວກເຈົ້າຕ້ອງການທີ່ຈະມີພາບ/ພາບພິມພາຍໃນບະບັດແບບຂັບເຄື່ອງຂອງພວກເຈົ້າ, ພວກເຈົ້າສາມາດນໍາໃຊ້ ການຈັດການ background-image ກັບ background-image ການຈັດການວິດີໂອຂອງ background-position

ຄວາມຄິດ

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

亲自试一试

ຄະຕິນການຄົ້ນຫາທີ່ມີການສະແດງຄວາມສະຫຼາດ

ໃນກໍລະນີນີ້ພວກເຮົາໃຊ້ CSS transition ການຈັດການວິດີໂອຂອງຄະຕິນການຄົ້ນຫາທີ່ມີການສະແດງຄວາມສະຫຼາດ. ຕໍ່ມາພວກເຈົ້າຈະຮຽນໃນພັກພາຍໃນຂອງພວກເຮົາ ຫົວຂໍ້: ການສະແດງການປ່ຽນສະແດງ CSS ທີ່ເຮົາໄດ້ຮຽນໃນການຮຽນ transition ຄວາມຮູ້ຂອງປະສົມປະກອບ

ຄວາມຄິດ

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

亲自试一试

ການຈັດການວິດີໂອຂອງຄະຕິນຂັບເຄື່ອງ

ຄຳແນະນຳ:ການນໍາໃຊ້ resize ຄວາມປອດໄພຂອງຄະຕິນຂັບເຄື່ອງທີ່ບໍ່ສາມາດດັດຄວາມໃຫຍ່ຫຼືກາງຂອງຄະຕິນ (ຫຼຸດການກວດກາຢູ່ທີ່ດ້ານຊ້າຍ):

ຄວາມຄິດ

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

亲自试一试

ການຈັດການວິດີໂອຂອງຄະຕິນການເລືອກ

ຄວາມຄິດ

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

亲自试一试

ການຈັດການວິດີໂອຂອງຄະຕິນການເຂົ້າ

ຄວາມຄິດ

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;
}
/* 提示：请使用  width: 100%，以实现全宽按钮 */

亲自试一试

有关如何使用 CSS 设置按钮样式的更多知识，请学习我们的 ຫົວຂໍ້: ການສະແດງຄູ່ມູນຄອນ CSS 教程。

响应式菜单

请调整 TIY 编辑器窗口的大小来查看效果。当屏幕的宽度小于 600 像素时，使两列上下堆叠而不是左右堆叠。

高级：接下来的例子使用 媒体查询 来创建响应式表单。在下一章中，您将学到更多相关知识。

查看响应式菜单