CSS制作修改密码

修改密码表单的HTML结构

使用HTML创建一个基本的修改密码表单，包含当前密码、新密码和确认新密码字段。

<form id="changePasswordForm">
  <div class="form-group">
    <label for="currentPassword">当前密码</label>
    <input type="password" id="currentPassword" name="currentPassword" required>
  </div>

  <div class="form-group">
    <label for="newPassword">新密码</label>
    <input type="password" id="newPassword" name="newPassword" required>
  </div>

  <div class="form-group">
    <label for="confirmPassword">确认新密码</label>
    <input type="password" id="confirmPassword" name="confirmPassword" required>
  </div>

  <button type="submit">修改密码</button>
</form>

基础表单样式设计

为修改密码表单添加基础CSS样式，使其更具视觉吸引力。

#changePasswordForm {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

button[type="submit"] {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

密码强度指示器

添加密码强度指示器，帮助用户创建更强的密码。

.password-strength {
  height: 5px;
  margin-top: 5px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.strength-0 {
  width: 20%;
  background: #ff4d4d;
}

.strength-1 {
  width: 40%;
  background: #ff9966;
}

.strength-2 {
  width: 60%;
  background: #ffcc00;
}

.strength-3 {
  width: 80%;
  background: #99cc33;
}

.strength-4 {
  width: 100%;
  background: #33cc33;
}

密码可见性切换

添加切换密码可见性的功能，方便用户检查输入的密码。

.password-toggle {
  position: relative;
}

.password-toggle input {
  padding-right: 40px;
}

.password-toggle .toggle-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
}

响应式设计

确保修改密码表单在不同设备上都能良好显示。

@media (max-width: 600px) {
  #changePasswordForm {
    width: 90%;
    padding: 15px;
  }

  .form-group input {
    padding: 10px;
  }
}

表单验证样式

为表单验证添加视觉反馈，帮助用户识别错误。

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

.error-message {
  color: #ff3333;
  font-size: 0.8em;
  margin-top: 5px;
}

.form-group.error input {
  border-color: #ff3333;
}

加载状态样式

添加提交时的加载状态指示器，提升用户体验。

button.loading {
  position: relative;
  color: transparent;
}

button.loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

这些CSS样式可以组合使用，根据实际需求进行调整，创建一个功能完善且美观的修改密码界面。