如何通过CSS调整输入框内容的起始位置？

要让输入框的输入内容和占位文本都向右偏移，你不需要给::placeholder设置相对定位，直接给输入框本身添加padding-left样式即可，这样能同时作用于输入内容和占位符，效果更稳定：

修改后的CSS代码 #

#inputOfKilos {
    color: #ffffff;
    font: 14px/40px "Proxima Nova", sans-serif;
    background: burlywood;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid rgb(254, 144, 0); /* 补充边框样式，原代码仅指定颜色会导致边框不显示 */
    padding-left: 12px; /* 添加该属性实现内容整体向右偏移 */
}
#inputOfKilos::placeholder {
    color: #fff;
    /* 移除原有的position和left属性，无需单独控制占位符位置 */
}

原方案问题说明 #

你之前仅给::placeholder设置position: relative; left:12px，只会让占位文本偏移，但用户实际输入的内容仍从输入框最左侧开始，导致显示不一致。而padding-left是给输入框内部添加左侧内边距，输入框内的所有内容（包括输入文本和占位符）都会自动向右偏移，是更合理且兼容性更好的实现方式。

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