入门 CSS 自定义表单

在网站开发中，表单是不可避免的一部分。一般情况下，浏览器默认的表单样式可能不能完全满足我们的需求，这时候我们需要自定义表单样式。

CSS提供了很多自定义表单样式的选项，本文将向大家介绍如何入门 CSS 自定义表单。

1. 设置基本样式

首先，我们需要为表单设置基本样式。

form {
  border: 1px solid #ccc;
  padding: 20px;
}

我们可以通过设置边框和内边距等样式来美化表单。

2. 指定输入框样式

接下来，我们需要指定输入框的样式。

input[type="text"],
input[type="password"],
input[type="email"] {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 3px;
  font-size: 16px;
}

这里我们需要指定输入框类型为 text、password 和 email 的样式。我们可以通过设置边框、内边距、边框半径和字体大小等样式来美化输入框。

3. 设置按钮样式

最后，我们需要设置按钮的样式。

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border-radius: 3px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

这里我们需要指定按钮类型为 submit 的样式。我们可以通过设置背景色、字体颜色、内边距、边框半径、字体大小、边框和鼠标指针等样式来美化按钮。

4. 完整代码

下面是完整的自定义表单样式代码：

form {
  border: 1px solid #ccc;
  padding: 20px;
}

input[type="text"],
input[type="password"],
input[type="email"] {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 3px;
  font-size: 16px;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border-radius: 3px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

5. 总结

通过本文的介绍，我们可以看到 CSS 提供了很多自定义表单样式的选项。我们可以根据自己的需求来设置表单的样式，使它满足我们的整体网站设计风格。