MrBuggy MrBuggy - 5 months ago 10
CSS Question

Style differences of input type text and number

I've got this code:

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;
}
}
}
}


When my input has
type="text"
I got this result:

enter image description here

When I change it to
type="number"
:

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


I got this result:

enter image description here

When I use
type="number"
for my input, it moves my div 1-2px to the top, but why, what's the difference and why doesn't it work for each type of "text" and "number"?

EDIT:

I've found this the global style:

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


I removed it, now it works.

Answer

There is default padding on <input> element. Try this:

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

jsFiddle

.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;
}
<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>