如何用CSS实现浅色透明文本框？登录页设计技术求助

嘿，我完全懂你想要的这种质感！其实你猜的没错，核心就是用rgba()来实现透明效果，再配合占位符的样式设置就能搞定。我给你写了一套完整的实现代码，你可以直接套用，还能根据需求调整：

完整代码示例 #

HTML结构 #

<div class="login-container">
  <input type="text" class="transparent-input" placeholder="用户名">
  <input type="password" class="transparent-input" placeholder="密码">
</div>

CSS样式 #

/* 容器加深色背景，能让透明输入框的效果更突出 */
.login-container {
  background-color: #1a1a2e; /* 示例深色背景，可替换成你的页面背景 */
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 300px;
}

/* 核心的透明输入框样式 */
.transparent-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.3); /* 透明白色边框，和风格统一 */
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15); /* 浅色透明背景，最后一位是透明度 */
  color: #ffffff; /* 输入文字设为白色 */
  font-size: 16px;
  outline: none; /* 去掉浏览器默认的聚焦边框 */
}

/* 设置占位符为白色（用淡白更有层次感） */
.transparent-input::placeholder {
  color: rgba(255, 255, 255, 0.8); /* 比输入文字稍淡的白色占位符 */
  /* 想要纯白色的话，直接改成 color: #fff; 即可 */
}

/* 聚焦时的交互效果，提升用户体验 */
.transparent-input:focus {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.2); /* 聚焦时稍微加深背景透明度 */
}

关键细节解释 #

• 背景透明度：background: rgba(255,255,255,0.15)里的最后一个数值控制透明度（0到1之间），数值越大越不透明，你可以根据页面背景调整，0.1-0.3之间都能做出柔和的浅色透明效果。
• 占位符样式：通过::placeholder伪元素单独设置占位符颜色，用淡白色比纯白色更有层次感，不会和输入文字完全混淆。
• 边框配合：边框也用透明白色，避免出现突兀的实色边框，让整体风格更统一。

你可以把这些代码放到项目里，调整颜色、透明度和尺寸，就能得到你想要的登录框效果啦！

内容的提问来源于stack exchange，提问作者Jagr