如何将离子图标放在固定位置的输入框中

Question

如何将离子图标置于标签浮动的输入框右侧的固定位置。我只希望标签浮动，而不是图标图标应固定在位置。我尝试将位置固定为固定位置，但是不工作。

<div class="input">
 <input type="date" [(ngModel)]="date" id="inputdate" required>
 <label>Date<ion-icon name="calendar" item-right> 
 </ion-icon>
 </label>
</div> 

$padding_input: .25em;
  $width_input_border: 1px;
  $color_form_bg: #E8F0F6;
  $time_animate: .25s;
  $color_valid: #344955;

  .input {
    margin-top: 33px;
    margin-left: 15px;
    position: relative;
    font-size: 1.2em;
    margin-bottom: .75em;
    color: #E8F0F6;
  }
label {
    font-size:19px;
    position: absolute;
    top: 50%;
    left: $padding_input;
    margin-left: $width_input_border;
    margin-top: -.6em;

    color: #344955;
    cursor: text; // keep it consistent

    transition: font-size $time_animate, 
      top $time_animate,
      left $time_animate,
      color $time_animate;
  }

  input {
    width: 95%;
    height: 50px;
    padding: $padding_input;
    border: 3px solid #344955;

    &:focus {
      & + label {
        color: #344955;
      }
    }

    &:valid {
      border-color: $color_valid;

      & + label {
        color: $color_valid;
      }
    }
  }

我想要一个浮动输入框，例如带有浮动名称的gmail登录。

Answer 1

如果要输入浮点数，只需更改

position:fixed;

与其相关的CSS类，并设置

right:#px;
bottom:#px;