如何将表单元素设置为白色？并添加输入项图标

一、修复表单元素白色背景无效问题 #

1. 提升选择器精度 #

!important无效通常是因为你的选择器权重低于现有样式，或者样式未覆盖元素的所有状态。用更精确的选择器锁定目标元素，并覆盖聚焦、hover等状态：

/* 姓名、出生日期输入框基础样式 */
.form-container .form-input {
  background-color: #ffffff !important;
  color: #333; /* 搭配深色文字保证可读性 */
  border: 1px solid #ddd;
}

/* 覆盖输入框聚焦、hover状态 */
.form-container .form-input:focus,
.form-container .form-input:hover {
  background-color: #ffffff !important;
  box-shadow: none; /* 可选：移除默认聚焦阴影 */
}

/* 性别选择区域样式 */
.gender-wrapper {
  background-color: #ffffff;
  padding: 0.6rem;
  border-radius: 4px;
}

.gender-wrapper label {
  color: #333;
  margin-right: 1.2rem;
}

/* 自定义单选按钮（可选） */
.gender-wrapper input[type="radio"] {
  accent-color: #2563eb; /* 调整选中时的标识颜色，适配白色背景 */
}

2. 检查样式加载顺序 #

确保你的自定义CSS文件在框架样式（如Bootstrap）之后引入，这样无需!important也能让样式优先级更高。如果无法调整加载顺序，就通过增加父类选择器来提升权重。

二、给输入项添加图标 #

方法1：使用图标字体（本地引入） #

先将图标字体文件放到项目本地，再修改HTML结构并添加定位样式：

HTML结构：

<div class="form-group">
  <i class="icon-user"></i> <!-- 替换为对应图标类名 -->
  <label for="name">姓名</label>
  <input type="text" id="name" class="form-input">
</div>

<div class="form-group">
  <i class="icon-phone"></i>
  <label for="phone">电话号码</label>
  <input type="tel" id="phone" class="form-input">
</div>

CSS样式：

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

/* 定位图标 */
.form-group i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 1rem;
}

/* 输入框左移内边距，避免文字被图标遮挡 */
.form-group .form-input {
  padding-left: 35px;
}

方法2：使用内联SVG图标 #

无需额外引入文件，直接嵌入SVG更轻量化：

HTML结构：

<div class="form-group">
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
    <circle cx="12" cy="7" r="4"></circle>
  </svg>
  <label for="name">姓名</label>
  <input type="text" id="name" class="form-input">
</div>

CSS样式（仅修改选择器）：

.form-group svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

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