Backspace 删除 Firefox 上的 padding-top答案

【问题标题】：Backspace removes padding-top on FirefoxBackspace 删除 Firefox 上的 padding-top
【发布时间】：2021-01-15 00:19:33
【问题描述】：

我制作了一个带有标签的输入字段，当焦点或文本在现场时，该标签会移动到左上角。然而，这工作正常。即使有错误处理。但是，当我在 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>

【问题讨论】：

这是由于输入的高度为100%，如果您删除高度，它不再上升。我不明白为什么，但就是因为这个。
@martinho 是的，但是输入位置关闭（并且丑陋）。当我删除 padding-top: 8px; 时，我得到了同样的效果。完全。
非常类似于我用 javascript 制作的解决方案 - stackoverflow.com/questions/63548283/…
@s.kuznetsov 我认为这不是解决方案。它应该只适用于 css。
@Silvan，我没有向你提供这个解决方案。刚刚展示了。

标签： html css firefox

【解决方案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

【讨论】：