退格键删除 Firefox 上的 padding-top

Question

我制作了一个带有标签的输入字段，当焦点或文本在现场时，该标签会移动到左上角。然而，这工作正常。即使有错误处理。但是，当我在 Firefox 上已经为空的输入中按下退格键时，它会删除填充顶部。其余时间标签有一半出框。

为什么以及如何避免这种情况？

演示：https://jsfiddle.net/SilvanFux/2cqxt56o/65/

@import url(https://fonts.googleapis.com/css?family=Roboto);
@font-face {  font-family: 'Lato';  font-style: normal;  font-weight: 300;  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}
@font-face {  font-family: 'Lato';  font-style: normal;  font-weight: 300;  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}
@font-face {  font-family: 'Lato';  font-style: normal;  font-weight: 400;  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}
@font-face {  font-family: 'Lato';  font-style: normal;  font-weight: 400;  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}
@font-face {  font-family: 'Lato';  font-style: normal;  font-weight: 700;  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/ObQr5XYcoH0WBoUxiaYK3_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}
@font-face {  font-family: 'Lato';  font-style: normal;  font-weight: 700;  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/H2DMvhDLycM56KNuAtbJYA.woff2) format('woff2');  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}

@font-face {
    font-family: 'codropsicons';
    src:url('../fonts/codropsicons/codropsicons.eot');
    src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
        url('../fonts/codropsicons/codropsicons.woff') format('woff'),
        url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
        url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
    font-weight: normal;
    font-style: normal;
}

*{
    font: 100%/1.5em sans-serif;
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-weight: 400;
}


.material-text-input {
  width: calc(100% - 10px);
  position: relative;
  height: 48px;
  overflow: hidden;
  margin: 5px;
}

.material-text-input input {
  width: 100%;
  height: 100%;
  color: #333333;
  padding-top: 8px;
  border: none;
  outline: none;
}

.material-text-input label {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: #1A4175;
  border-bottom: 1px solid #333333;
}

.material-text-input label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #1A4175;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.material-text-input label span {
  position: absolute;
  bottom: 5px;
  left: 0;
  transition-property: transform, font-size, font-weight, color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

.material-text-input input:focus + label span,
.material-text-input input:not(:placeholder-shown):valid + label span {
  transform: translateY(-120%);
  font-size: 14px;
  font-weight: bold;
  color: #1A4175;
}

.material-text-input input:not(:placeholder-shown):invalid + label span {
  transform: translateY(-120%);
  font-size: 14px;
  font-weight: bold;
  color: #8B0000;
}

.material-text-input input:focus + label::after {
  transform: translateX(0%);
}

.material-text-input input:not(:placeholder-shown):invalid + label::after {
  border-bottom: 2px solid #8B0000;
}

<div class="material-text-input">
  <input id="text-input-1" type="text" autocomplete="off" placeholder=" "/>
  <label for="text-input-1" class="">
    <span>Placeholdert/Title</span>
  </label>
</div>

<br/>

<div class="material-text-input">
  <input id="text-input-1" type="email" autocomplete="off" placeholder=" "/>
  <label for="text-input-1" class="">
    <span>Placeholdert/Title</span>
  </label>
</div>

Answer 1

将box-sizing: border-box;添加到输入

.material-text-input input {
    width: 100%;
    height: 100%;
    color: #333333;
    padding-top: 8px;
    border: none;
    outline: none;
    box-sizing: border-box;
}

您将输入的高度定义为 100% 并添加了另一个 8px 的填充，因此输入的高度大于父亲，出于某种原因，他在 firefox 中进行了跳跃。

Documentation

退格键删除 Firefox 上的 padding-top

Backspace removes padding-top on Firefox

html

css

firefox