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

Рейтинг: 0Ответов: 1Опубликовано: 20.02.2023

Хотел реализовать , чтобы внутри 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>

css html
Источник: Stack Overflow на русском

Ответы

▲ 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" autofocus>
</label>