Как правильно стилизовать input с паролем

Question

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

P.s: Я даже сделал так чтобы при определённом количестве символов в input переносить эту кнопку правее, но символы бывают разной ширины, в зависимости от заглавных букв и тд они все равно заходят за границу и никак не посчитать сколько точно нужно символов для сдвига кнопки.

Answer 1

Как по мне самый лёгкий способ - это просто кнопку расположить справа и задать им бесцветный задний фон

const password = document.querySelector('#password');
const toggleVisibility = document.querySelector('#toggle-visibility');
let state = new Map([
  ['password', 'text'],
  ['text', 'password']
])

toggleVisibility.addEventListener('click', () => {
  password.setAttribute('type', state.get(password.getAttribute('type')))
})

:root {
  --border-radius: 8px;
}

body {
  background-color: rgba(0, 0, 0, 0.2);
}

div.password {
  display: flex;
  background-color: gray;
  width: fit-content;
  border-radius: var(--border-radius);  
}

input {
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  padding-right: 4px;
}

input:focus {
  outline: none; //Чтобы убрать обводку при фокусе
}

button {
  background-color: transparent;
  cursor: pointer;
  border: none;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

<div class='password'>
  <input id="password" type="password" />
  <button id="toggle-visibility">Eye</button>
</div>

БЛОГ НА HUSL

Как правильно стилизовать input с паролем

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