html - 在 HTML 中可浮动的不止一个所有标签都是浮动的

Question

我正在尝试在 Ionic 中创建自定义 Float 标签，但一旦字段它就可以了。不止一次，当我们单击任何输入时，字段所有标签都是浮动的，请帮助我

这是我的 HTML 代码：

输入.htmls

     <div class="form-field">
      <label [ngClass]="focused ? 'label-focused' : ''">Hellow</label>
    <input type="text" (focus)="focused = true" (blur)="onBlur($event)" />
  </div>

这是我的 SCSS 代码：

输入.scss

  .form-field {
  position: relative;
  margin-bottom: 1rem;
  height: 50px;

  label {
    position: absolute;
    left: 1rem;
    top: 1rem;
    padding: 0 0.25rem;
    color: #61686f;
    font-size: 15px;
    transition: 0.3s;
    font-family: "Montserrat";
  }

  input {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    font-size: 15px;
    border: 2px solid #e7ebee;
    border-radius: 10px;
    outline: none;
    padding: 1rem;
    background: none;
    z-index: 1;
    color: #171c25;
    font-family: "Montserrat";
  }

  input:focus {
    border-color: #fa578e;
  }

  .label-focused {
    top: -0.4rem;
    left: 0.8rem;
    font-size: 14px;
    font-weight: 600;
    background-color: #fff;
    z-index: 10;
  }
}

这是我的组件打字稿代码：Input.ts

onBlur(event: any) {
const value = event.target.value;

if (!value) {
  this.focused = false;
}   }

浮动标签图像

标签： htmltypescriptscss-lint