Изменение имени пользователя

Question

хочу сделать изменение имени пользователя вот так:

Тоесть при нажимании на карандаш поле input меняет цвет фона, и разрешается редактирование. Но есть проблема, при загрузке сайта иконка карандаша, будет стоять в стороне так, как есть границы input. И хочется чтобы имя было видно полностью и при этом красиво всё это выглядело. Искал материал потому как подганять input под текст, но не нашел. Может есть метод получше, например всё организовать больше на JS?

Answer 1

Вы можете использовать padding-right что-бы создать отступ внутри инпута справа
Поправка : вместо svg вы можете использовать тэг i с иконнкой из Font Awesome

const name1 = document.getElementById("name1");
const name2 = document.getElementById("name2");
name1.addEventListener("keyup", changeLength1);
name2.addEventListener("keyup", changeLength2);

function changeLength1() {
  name1.setAttribute("size", name1.value.length - 3);
}

function changeLength2() {
  name2.setAttribute("size", name2.value.length - 3);
}

changeLength1();
changeLength2();

div {
  position: relative;
  width: auto;
  display: inline;
}

input {
  background-color: #fff;
}

#name1 {
  margin-right: 24px;
}

#name2 {
  padding-right: 24px;
}

input:nth-child(2) {
  padding-right: 24px;
}

svg {
  position: absolute;
  height: 80%;
  top: 10%;
  right: 5%;
}

<div>
  <input type="text" id="name1" value="Nikolay">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32zM421.7 220.3L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3z"/>
</svg>
</div>

<div>
  <input type="text" id="name2" value="Nikolay">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32zM421.7 220.3L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3z"/>
</svg>
</div>

БЛОГ НА HUSL

Изменение имени пользователя

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