css表单代码

以下是一个简单的CSS表单代码示例：

HTML代码：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  
  <input type="submit" value="提交">
</form>

CSS代码：

form {
  width: 300px;
  margin: 0 auto;
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

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

这个示例包含一个包含姓名、邮箱和密码字段的简单表单。CSS样式定义了表单的宽度、标签和输入框的样式，以及提交按钮的样式。

当用户在输入框中输入内容时，浏览器会自动应用默认的样式。但是，通过使用CSS，我们可以自定义表单的外观，使其与网站的整体设计风格保持一致。

在上面的示例中，我们使用了一些常见的CSS属性来设置表单的样式：

width属性用于设置表单的宽度，这里设置为300px，并使用margin: 0 auto;将表单水平居中。

label元素被设置为display: block;，使其在新行上显示，并添加了margin-bottom属性来设置标签之间的间距。

input[type="text"]、input[type="email"]和input[type="password"]选择器用于选择不同类型的输入框，并设置宽度、内边距和底部间距。

input[type="submit"]选择器用于选择提交按钮，并设置背景颜色、文本颜色、内边距、边框和鼠标指针样式。

:hover伪类选择器用于设置鼠标悬停在提交按钮上时的样式。

这只是一个简单的示例，你可以根据自己的需求进一步自定义表单的样式。你可以使用其他CSS属性和选择器来设置表单的背景颜色、边框样式、字体样式等。