当前位置：首页 > CSS

css如何制作密码

2026-04-01 22:36:45CSS

使用CSS制作密码输入框

通过CSS可以增强密码输入框的样式和交互效果，以下是几种常见的方法：

设置基础样式

css如何制作密码

input[type="password"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: 200px;
}

添加焦点效果

input[type="password"]:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

自定义密码显示/隐藏按钮

css如何制作密码

<div class="password-container">
  <input type="password" id="password" placeholder="输入密码">
  <button class="toggle-password">显示</button>
</div>

.password-container {
  position: relative;
  display: inline-block;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
}

添加验证状态提示

input[type="password"].valid {
  border-color: #4CAF50;
}

input[type="password"].invalid {
  border-color: #f44336;
}

使用伪元素添加图标

.password-field {
  position: relative;
}

.password-field::after {
  content: "🔒";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

这些CSS技巧可以帮助创建更美观、更用户友好的密码输入界面。实际应用中可以根据设计需求调整样式细节。