Движение картинки в input

Question

Хотел реализовать , чтобы внутри input была картинка , которая двигалась бы в зависимости от количества написанного текста в input , то есть условно она там будет располагаться в 10 пикселях с лева от текста и при вводе текста она будет уходить в лево ?

.fieldones {
   position: absolute;
   width: 400px;
   font-weight: 700;
   font-size: 40px;
   line-height: 100%;
   letter-spacing: -0.02em;
   color: #FFF;  
   text-align: center;   
   justify-content: center;
   background-image: url(../../../svg/block.svg); 
   background-repeat: no-repeat;
   background-position: 80px;
   background: #000;
}

<input class="fieldones" maxlength="8" autofocus>

Answer 1

Думаю то что нужно))

.fieldones {
   font-weight: 700;
   font-size: 40px;
   line-height: 100%;
   letter-spacing: -0.02em;
   color: #FFF;  
   text-align: center;
   background: transparent;
   border: none;
   outline: none;
   width:10px;
}
label {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}
.like-img {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  background: white;
}

<label>
<span class="like-img">IMG</span>
<input class="fieldones" onkeydown="this.style.width = ((this.value.length + 1) * 22) + 'px';" autofocus>
</label>

БЛОГ НА HUSL

Движение картинки в input

Ответы (1 шт):