添加Padding后Input控件值消失的CSS格式化问题求助

算力阿峰

2026-7-3

问题：调整BID VALUE输入框CSS时文本消失的解决办法

问题背景

需求：对页面中BID VALUE的input元素进行CSS格式化，匹配目标样式
遇到的问题：通过padding调整输入框宽度后，框内文本值消失（疑似被隐藏）；默认样式的输入框无法完整显示出价数值
当前使用的自定义CSS（编号1输入框）：

input[name="bid_value"]
{
  width:auto;
  padding: 4px 120px 5px 31px;
  margin: 2px 11px;
  box-sizing: border-box;
 text-align: left;
    
}

问题原因

左内边距过度挤压内容区：设置的padding-left:31px结合width:auto时，输入框的宽度由容器或默认规则决定，过大的左内边距把文本挤到了输入框的可视范围之外，导致文本不可见。
宽度自适应逻辑冲突：虽然启用了box-sizing: border-box，但width:auto不会让输入框主动扩展宽度来容纳内边距+内容，当内边距设置过大，内容区域被压缩到无法显示文本。

解决建议

方案1：固定宽度+合理内边距

将width:auto改为固定宽度，同时调整内边距数值，确保内容区域有足够空间显示文本：

input[name="bid_value"]
{
  width: 220px; /* 根据目标样式调整合适宽度 */
  padding: 4px 15px 5px 15px; /* 缩小左右内边距，避免挤压文本 */
  margin: 2px 11px;
  box-sizing: border-box;
  text-align: left;
}

方案2：最小宽度限制+自适应宽度

如果需要输入框宽度自适应，添加min-width属性保证内容区域的最小空间：

input[name="bid_value"]
{
  width: auto;
  min-width: 180px; /* 确保内容不会被过度挤压 */
  padding: 4px 20px 5px 20px;
  margin: 2px 11px;
  box-sizing: border-box;
  text-align: left;
}