Html 输入类型文本和数字的样式差异

我有这个密码：

HTML:

<div class="wscInputHelpComponent">
    <div class="cInputWithButton">
        <input class="cInputAddon" type="text">
        <div class="cInputButton"></div>
    </div>
</div>

.wscInputHelpComponent {
    .cInputWithButton {
        display: flex;
        height: 25px;
        .cInputAddon {
            width: 50px;
            height: 100%;
            border-right: none;
        }
        .cInputButton {
            width: 25px;
            height: 100%;
            background-color: $APP_COLOR;
            &:hover {
                cursor: pointer;
                background-color: $APP_COLOR_LIGHT;
            }
        }
    }
}

当我的输入具有

type=“text”

时，我得到以下结果：

当我将其更改为

type=“number”

时：

---

我删除了它，现在它可以工作了。

元素上有默认的填充。试试这个：

.cInputAddon {
  ...
  box-sizing: border-box;
}

.wscInputHelpComponent.cInputWithButton{
显示器：flex；
高度：25px；
}
.wscInputHelpComponent.cInputWithButton.cInputAddon{
宽度：50px；
身高：100%；
边框：1px纯银；
边界权：无；
框大小：边框框；
}
.wscInputHelpComponent.cInputWithButton.cInputButton{
宽度：25px；
身高：100%；
背景颜色：绿色；
}
.wscInputHelpComponent.cInputWithButton.cInputButton:悬停{
光标：指针；
背景颜色：蓝色；
}

我实际上无法重现这个问题。但是请注意文本框边框

.cInputWithButton{
显示器：flex；
高度：25px；
}
.cInputWithButton>.cInputAddon{
宽度：50px；
高度：计算（100%-2px）；
边框：1px实心#中交；
边界权：无；
}
.cInputWithButton>.cInputButton{
宽度：25px；
身高：100%；
边框：1px纯红；
背景色：红色；
显示：内联；
}

---

我找到了。。我在一个全局css文件中发现了follow style:input[type=“number”]{margin top:3px；}-所以它也在我的输入中添加了这个…我删除了它，现在它可以工作了。但是谢谢。。

input[type="number"] {margin-top: 3px;}

.cInputAddon {
  ...
  box-sizing: border-box;
}