Как сделать такой ?

Question

Не подскажете как получить такой input?

Answer 1

Называется input-mask

Примеры: https://www.jqueryscript.net/blog/best-input-mask.html

UPD:

<div class="wrap">
  <label for="">
    <span>text</span>
    <input type="text">
  </label>
</div>

label {
  position: relative;
}
span {
  position: absolute;
  top: 0;
  transform: translateY(-1.5rem);
  left: 1rem;
  display: inline-block;
  background: #fff;
  padding: 0 4px 0 4px
}
input {
  border-radius: 15px;
  padding: 1rem;
  outline: none;
  border: solid 1px silver;
  box-sizing: boder-box;
  display: inline-block;
}

Answer 2

Типа такого?

* {
  font-family: 'Segoe UI';
}

.phone-number {
  border-color: rgb(223, 225, 229);
  border-radius: 5px;
}

.phone-number legend {
  color: rgb(106, 106, 106);
  -webkit-text-stroke: rgb(106, 106, 106) 0.2px;
}

.phone-number input {
  border: 0;
  outline: 0;
  width: 28px;
}

.phone-number [maxlength="3"] {
  margin-right: -8px;
  width: 24px;
}

<fieldset class="phone-number">
  <legend>Phone Number</legend>
  <span>+7</span>
  <input type="text" maxlength="3" placeholder="---">
  <input type="text" maxlength="3" placeholder="---">
  <input type="text" maxlength="4" placeholder="----">
</fieldset>

БЛОГ НА HUSL

Как сделать такой ?

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