CSS 教程

CSS 教程 CSS 简介 CSS 语法 CSS 选择器 CSS 如何使用 CSS 注释 CSS 颜色 CSS 背景 CSS 边框 CSS 外边距 CSS 内边距 CSS 高度/宽度 CSS Box 模型 CSS 轮廓 CSS 文本 CSS 字体 CSS 图标 CSS 链接 CSS 列表 CSS 表格 CSS Display CSS Max-width CSS 定位 CSS 溢出 CSS 浮动 CSS Inline-block CSS 对齐 CSS 组合器 CSS 伪类 CSS 伪元素 CSS 不透明度 CSS 导航栏 CSS 下拉菜单 CSS 图片库 CSS 图像拼合技术 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网站布局 CSS 单位 CSS 特异性

CSS3 高级教程

CSS3 高级教程 CSS3 简介 CSS3 圆角 CSS3 边框图像 CSS3 多重背景 CSS3 颜色 CSS3 渐变 CSS3 阴影 CSS3 文本效果 CSS3 网络字体 CSS3 2D 转换 CSS3 3D 转换 CSS3 过渡 CSS3 动画 CSS3 提示框 CSS3 样式图像 CSS3 object-fit CSS3 按钮 CSS3 分页 CSS3 多列 CSS3 用户界面 CSS3 变量 CSS3 盒子大小 CSS3 媒体查询 CSS3 媒体查询实例 CSS3 弹性盒子

CSS 响应式

RWD 简介 RWD 视口 RWD 网格视图 RWD 媒体查询 RWD 图像 RWD 视频 RWD 框架 RWD 模板

CSS 网格视图

Grid 网络简介 Grid 网格容器 Grid 网格项目

CSS 实例

CSS 模板 CSS 实例 CSS 测验 CSS 练习

CSS 参考手册

CSS 参考手册 CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 网络安全字体 CSS 动画相关属性 CSS 单位 CSS PX-EM 单位转换 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 实体 CSS 听觉


CSS 表单

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

亲自试一试 »

设置输入字段的样式

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

实例

input {
  width: 100%;
}
亲自试一试 »

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

  • 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 选择器可以在输入字段获得焦点时为其设置样式:

实例

input[type=text]:focus {
  background-color: lightblue;
}
亲自试一试 »

实例

input[type=text]:focus {
  border: 3px solid #555;
}
亲自试一试 »

带有图标/图像的输入框

如果希望在输入框中包含图标,请使用 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;
}
亲自试一试 »

带动画效果的搜索输入框

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

实例

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

input[type=text]:focus {
  width: 100%;
}
亲自试一试 »

设置文本域的样式

提示: 使用 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;
}
亲自试一试 »

设置选择菜单的样式

实例

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 像素时,使两列上下堆叠而不是左右堆叠。

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

亲自试一试 »