如何为表单的地址输入框设置更大的显示空间？

我有两张参考图，上方是预期实现的地址输入栏效果，下方是当前的实际效果。希望把地址输入栏改成预期样式，当前使用的HTML代码如下：

<label for="addBox">Address *</label>
<input type="text" id="addBox" name="address" required>
<br>

由于看不到具体的预期样式，我列出几种常见的表单输入栏场景及对应的CSS实现方案，你可以根据实际效果调整：

场景1：标签单独一行，输入框占满容器宽度并美化 #

这是表单中最常用的布局，标签独占一行，输入框适配容器宽度，搭配柔和的边框与交互效果：

/* 用容器包裹表单元素，方便统一控制布局 */
.address-group {
  margin-bottom: 16px;
}

.address-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.address-group input#addBox {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box; /* 避免输入框宽度溢出容器 */
}

/* 输入框聚焦时的高亮效果 */
.address-group input#addBox:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

对应的HTML调整（添加容器）：

<div class="address-group">
  <label for="addBox">Address *</label>
  <input type="text" id="addBox" name="address" required>
</div>

场景2：标签与输入框同行排列 #

如果预期是标签和输入框在同一行，标签固定宽度，输入框占剩余空间：

.address-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.address-group label {
  width: 80px;
  font-size: 14px;
  color: #333;
}

.address-group input#addBox {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
}

HTML同样用上述容器包裹即可。

场景3：带前缀/后缀图标（若预期效果包含图标） #

如果预期输入栏有地址图标之类的装饰，可以用相对定位实现：

.address-group {
  position: relative;
  margin-bottom: 16px;
}

.address-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.address-group input#addBox {
  width: 100%;
  padding: 10px 12px 10px 36px; /* 给左侧图标留出空间 */
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

/* 用伪元素添加图标，也可以替换为img标签 */
.address-group::before {
  content: "📍";
  position: absolute;
  left: 12px;
  top: 32px; /* 调整位置对齐输入框文字 */
  font-size: 16px;
  color: #999;
}

如果你的预期效果和以上场景不符，可以补充描述具体细节（比如边框样式、颜色、特殊布局、是否有占位文字等），我再针对性调整代码。

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