css零到一中级教程021：CSS 表单

最新推荐文章于 2026-01-05 11:04:12 发布

原创最新推荐文章于 2026-01-05 11:04:12 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

css零到一专栏收录该内容

98 篇文章 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文是一篇关于CSS美化HTML表单的教程，介绍了如何设置输入字段样式、填充、边框、颜色，以及如何处理聚焦状态，还展示了创建带有图标、动画效果的输入框，设置文本域和响应式菜单的技巧。

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

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<

了解本专栏