如何修改CSS实现每个输入框与对应图标的正确绑定？

问题根源分析 #

你现在的问题核心出在两个地方：

1. HTML结构不合理：所有输入框和图标都挤在同一个.inputWithIcon容器里，而CSS里图标是绝对定位到容器左上角，这就导致所有图标重叠在同一位置，根本没法对应各自的输入框。
2. CSS选择器逻辑不匹配：你用的input:focus + i是选中紧跟输入框后的第一个<i>元素，但当前交替排列的多组输入框+图标结构，会让焦点样式触发错误的图标。

具体修改步骤 #

第一步：调整HTML结构

把每一组输入框和对应的图标单独包裹进一个.inputWithIcon容器，给每个图标独立的定位上下文。比如原来的：

<input type="text" name="name" placeholder="Přihlašovací jméno nebo E-mail" required>
<i class='material-icons'>person</i>

要改成：

<div class="inputWithIcon">
  <input type="text" name="name" placeholder="Přihlašovací jméno nebo E-mail" required>
  <i class='material-icons'>person</i>
</div>

注册表单里的密码、邮箱、姓名等所有输入框+图标组合，都要做同样的拆分调整。另外注意去掉输入框上多余的class="inputWithIcon"属性（你给注册表单里的一个输入框加了这个，现在外层容器已经承担了这个角色）。

第二步：修改CSS代码

适配新的结构，调整定位和选择器逻辑：

/* 保留原有基础样式，修改以下关键部分 */
.inputWithIcon { 
  position: relative; 
  margin-bottom: 8px; /* 给每个输入框组添加底部间距，避免拥挤 */
}
.inputWithIcon i { 
  position: absolute; 
  left: 0; 
  top: 50%; /* 让图标垂直居中对齐输入框文字 */
  transform: translateY(-50%); /* 配合top:50%实现精准垂直居中 */
  padding: 0 12px; /* 调整内边距，优化图标位置 */
  color: #aaa; 
  transition: 0.3s; 
}
/* 用通用兄弟选择器~，确保输入框聚焦时，同容器内的图标变色 */
.inputWithIcon input:focus ~ i { 
  color: rgb(0, 0, 0); 
}
input { 
  font-family: 'Nunito', sans-serif; 
  width: 100%; 
  border: 2px solid rgb(0, 0, 0); 
  margin: 0; /* 去掉原有margin，改用.inputWithIcon的间距控制 */
  outline: none; 
  padding: 12px 12px 12px 40px; /* 加大上下内边距提升美观度，左侧留足图标空间 */
  box-sizing: border-box; 
  transition: 0.3s; 
}

额外说明 #

性别选择的radio按钮和图标不需要放在.inputWithIcon容器里，保持现有结构即可，避免样式冲突。

这样修改后，每个图标都会精准定位在对应输入框的左侧，输入框聚焦时，专属图标也会同步变色，完全解决匹配问题！

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