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

Question

我有这段代码：

HTML：

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

CSS（SCSS）：

.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"时：

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

我得到了这个结果：

当我使用type="number"作为我的输入时，它会将我的div 1-2px移到顶部，但是为什么，有什么区别以及为什么它不适用于每种类型的＆？ ＃34;文本＆＃34;和＆＃34;号码＆＃34;？

修改

我发现这是全球风格：

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

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

Answer 1

<input>元素上有默认填充。试试这个：

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

<强> jsFiddle

＆＃13;

＆＃13;

.wscInputHelpComponent .cInputWithButton {
  display: flex;
  height: 25px;
}
.wscInputHelpComponent .cInputWithButton .cInputAddon {
  width: 50px;
  height: 100%;
  border: 1px solid silver;
  border-right: none;
  box-sizing: border-box;
}
.wscInputHelpComponent .cInputWithButton .cInputButton {
  width: 25px;
  height: 100%;
  background-color: green;
}
.wscInputHelpComponent .cInputWithButton .cInputButton:hover {
  cursor: pointer;
  background-color: blue;
}

＆＃13;

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

<br>

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

    .cInputWithButton {
      display: flex;
      height: 25px;
    }
    .cInputWithButton > .cInputAddon {
      width: 50px;
      height: calc(100% - 2px); 
      border: 1px solid #cccccc;
      border-right: none;
    }
    .cInputWithButton > .cInputButton {
      width: 25px;
      height: 100%;
      border: 1px solid red;
      background-color: red;
      display: inline;
    }

＆＃13;

<div class="wscInputHelpComponent">
  <div class="cInputWithButton">
    <input class="cInputAddon" type="number">

    <div class="cInputButton"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;