如何让输入框尺寸不受内边距（padding）变化影响？

问题根源 #

你设置的输入框固定高度3rem，当动态修改padding为1rem 1rem 2rem时，上下padding总和已经等于3rem，输入框内的文本没有剩余空间显示，浏览器会自动撑开高度来容纳内容——这和box-sizing: border-box无关，因为border-box只约束padding+border不超出height，但内容本身的高度如果超过height - padding，还是会撑高元素。

解决步骤 #

• 调整固定高度：计算好最大的上下padding总和，加上文本的行高，设置为输入框的固定height。比如你最大上下padding是1rem + 2rem = 3rem，文本行高设为1.2，字体大小14px（按1rem=16px换算约0.875rem），那么height应该设为3.875rem（或用像素值精准控制）。
• 用CSS类切换样式：避免JS直接修改内联样式和style标签内容，通过添加/移除类来控制padding和placeholder样式，更易维护且样式优先级更清晰。
• 固定文本行高：给输入框设置固定line-height，确保文本高度稳定，不会额外撑开输入框。

修改后的代码 #

HTML

<div class="form" id="forma">
  <h1>Sign Up</h1>
  <div id="inputs" style="line-height: 2.5em">
    <input class="input" type="email" name="emailOrPhone" placeholder="Email or phone number" />
    <input class="input password" type="password" placeholder="Password" maxlength="12" oninput="validateLength()" />
    <p class="error" id="error1"></p>
    <input class="input password" type="password" placeholder="Re-enter password" maxlength="12" oninput="isMatch()" />
    <p class="error" id="error2"></p>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

.form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient( 90deg, rgba(70, 125, 179, 1) 0%, rgba(2, 31, 59, 1) 100%);
  padding: 5em;
  border-radius: 6em 1em 6em;
  display: flex;
  flex-direction: column;
  gap: 3em;
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3);
}

.input {
  height: 3.875rem; /* 3rem上下padding + 0.875rem文本行高 */
  min-width: 14rem;
  width: 70%;
  outline: none;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.2; /* 固定文本行高 */
  font-size: 14px;
}

/* 聚焦状态样式类 */
.input-focused {
  padding: 1rem 1rem 2rem;
}

.input-focused::placeholder {
  font-size: 12px;
}

JavaScript

const inputs = document.querySelectorAll('.input');

function focusInput() {
  inputs.forEach(input => input.classList.add('input-focused'));
}

function clearInput() {
  inputs.forEach(input => input.classList.remove('input-focused'));
}

额外说明 #

• 如果不想手动计算高度，可以把height换成min-height，但这样输入框可能会在内容过多时变高；如果要严格固定尺寸，计算好固定height更靠谱。
• 确保所有输入框的字体大小一致，避免不同字体大小导致的文本高度差异。

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