CSS 表单
使用 CSS 可以极大地改善 HTML 表单的外观
样式化输入字段
使用 width
属性确定输入字段的宽度
上面的示例适用于所有 <input> 元素。如果要只样式化特定类型的输入,可以使用属性选择器
input[type=text]
- 只选择文本字段input[type=password]
- 只选择密码字段input[type=number]
- 只选择数字字段- 等等..
带内边距的输入字段
使用 padding
属性在文本字段内添加空间。
提示:当有许多输入字段连续出现时,你可能还想添加一些 margin
,以在它们外部添加更多空间
示例
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
自己动手试一试 »
请注意,我们将 box-sizing
属性设置为 border-box
。这确保了内边距和边框最终包含在元素的总宽度和高度中。
请阅读我们 CSS 盒子模型章节中关于 box-sizing
属性的更多内容。
带边框的输入字段
使用 border
属性更改边框的大小和颜色,并使用 border-radius
属性添加圆角
如果只想添加底部边框,请使用 border-bottom
属性
彩色输入字段
使用 background-color
属性为输入添加背景色,并使用 color
属性更改文本颜色
聚焦的输入字段
默认情况下,某些浏览器会在输入字段获得焦点(点击时)时添加蓝色轮廓。您可以通过向输入添加 outline: none;
来移除此行为。
使用 :focus
选择器在输入字段获得焦点时执行某些操作
带图标/图片的输入字段
如果您想在输入字段中添加图标,请使用 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: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* 提示:使用 width: 100% 使按钮全宽 */
自己动手试一试 »
有关如何使用 CSS 样式化按钮的更多信息,请阅读我们的 CSS 按钮教程。
响应式表单
调整浏览器窗口大小以查看效果。当屏幕宽度小于 600px 时,使两列堆叠在一起而不是并排显示。
高级:下面的示例使用了 媒体查询 来创建响应式表单。您将在后续章节中了解更多关于此内容。