当前位置：首页 > CSS

css 表单制作

2026-01-28 03:57:55CSS

CSS 表单制作方法

基础表单结构 使用 HTML 创建表单元素，包括输入框、标签和按钮。表单通常包含 <form> 标签，内部有 <input>、<label> 和 <button> 等元素。

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name">

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email">

  <button type="submit">提交</button>
</form>

样式化表单元素 通过 CSS 设置表单的宽度、边距、字体和颜色。使用 padding 和 margin 调整间距，border 设置边框样式。

form {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
  border: 1px solid #ddd;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background: #007BFF;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

响应式设计 使用媒体查询确保表单在不同设备上显示良好。调整宽度和布局以适应小屏幕。

@media (max-width: 600px) {
  form {
    width: 90%;
  }
}

高级样式技巧 通过 :focus 伪类高亮当前输入框，使用 transition 添加平滑动画效果。

input:focus {
  border-color: #007BFF;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  transition: all 0.3s ease;
}

验证样式 利用 :valid 和 :invalid 伪类为表单验证提供视觉反馈。

input:valid {
  border-color: #28a745;
}

input:invalid {
  border-color: #dc3545;
}

自定义复选框和单选按钮 隐藏默认样式，使用 ::before 和 ::after 伪元素创建自定义设计。

css 表单制作

input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  margin-right: 10px;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label::before {
  background: #007BFF;
  border-color: #007BFF;
}