Как реализовать анимацию кружов?

Рейтинг: -3Ответов: 1Опубликовано: 05.02.2023

ввели шесть цифр - заполнились кружками А если ничего не ввели - то будут просто черточки

введите сюда описание изображения

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

Ответы

▲ 2

Воспользуйтесь стандартным полем для ввода пароля, добавив соответствующее оформление:

body { font: 600 32px/1em 'Segoe UI', monospace; color: #f7eeef; background-color: #0066b0; }

input[type="password"] {
  font: 96px/1em 'Courier New', monospace;
  height: 1em;
  width: 6ch;
  padding: 0;
  border: none;
  outline: none;
  color: #f7eeef;
  caret-color: transparent;
  background: 0.185em 0.43em / 0.6em 0.0625em linear-gradient(to right, currentColor 0 0.243em, transparent 0.243em 0.6em) repeat-x;
}
input[type="password"]::-ms-reveal { display: none; }
Введите секретный код<br>
<input type="password" maxlength="6">