как вывести значок иона в поле ввода с фиксированным положением

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;