CSS 表单

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

css_forms.htm

设置输入字段的样式

使用 width 属性来确定输入字段的宽度:

实例

  1. input {
  2. width: 100%;
  3. }

css_form_width.htm

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

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

填充输入框

使用 padding 属性在文本字段内添加空间。

提示:若有很多输入,那么您可能还需要添加外边距,以便在它们之外添加更多空间:

实例

  1. input[type=text] {
  2. width: 100%;
  3. padding: 12px 20px;
  4. margin: 8px 0;
  5. box-sizing: border-box;
  6. }

css_form_padding.htm

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

请在在我们的 CSS Box Sizing 这一章中学习有关box-sizing 属性的更多知识。

带边框的输入框

请使用 border 属性更改边框的粗细和颜色,并使用 border-radius 属性添加圆角:

实例

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

css_form_border_1.htm

如果仅需要下边框,请使用 border-bottom 属性:

实例

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

css_form_border_2.htm

彩色的输入框

请使用 background-color 属性为输入添加背景色,并使用 color 属性更改文本颜色:

实例

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

css_form_color.htm

获得焦点的输入框

默认情况下,某些浏览器在获得焦点(单击)时会在输入框周围添加蓝色轮廓。您可以通过向输入添加 outline: none; 来消除此行为。

使用 :focus 选择器可以在输入字段获得焦点时为其设置样式:

实例 1

  1. input[type=text]:focus {
  2. background-color: lightblue;
  3. }

css_form_focus_1.htm

实例 2

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

css_form_focus_2.htm

带有图标/图像的输入框

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

实例

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

css_form_icon.htm

带动画效果的搜索输入框

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

实例

  1. input[type=text] {
  2. transition: width 0.4s ease-in-out;
  3. }
  4. input[type=text]:focus {
  5. width: 100%;
  6. }

css_form_search_animated.htm

设置文本域的样式

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

实例

  1. textarea {
  2. width: 100%;
  3. height: 150px;
  4. padding: 12px 20px;
  5. box-sizing: border-box;
  6. border: 2px solid #ccc;
  7. border-radius: 4px;
  8. background-color: #f8f8f8;
  9. resize: none;
  10. }

css_form_textarea.htm

设置选择菜单的样式

实例

  1. select {
  2. width: 100%;
  3. padding: 16px 20px;
  4. border: none;
  5. border-radius: 4px;
  6. background-color: #f1f1f1;
  7. }

css_form_select.htm

设置输入按钮的样式

实例

  1. input[type=button], input[type=submit], input[type=reset] {
  2. background-color: #4CAF50;
  3. border: none;
  4. color: white;
  5. padding: 16px 32px;
  6. text-decoration: none;
  7. margin: 4px 2px;
  8. cursor: pointer;
  9. }
  10. /* 提示:请使用 width: 100%,以实现全宽按钮 */

css_form_button.htm

有关如何使用 CSS 设置按钮样式的更多知识,请学习我们的 CSS 按钮 教程。

响应式菜单

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

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

css_form_responsive.htm