Как сделать единицу измерения в input?

Question

Как реализовать такое? У меня input в jquery ui slider задействован, я хочу чтоб всегда в поле было "кг" и чтоб никто его не мог изменить. Это с помощью псевдоклассов делается? Или как лучше?

Answer 1

div {
  display: inline-block; position: relative;
}

input {
  display: block;
  width: 200px;
  height: 50px;
  outline: none;
  border: 1px solid gray;
  border-radius: 8px;
  text-align: right;
  padding: 0 100px 0 0;
  font-size: 20px;
  color: gray;
  font-family: monospace;
  background: lightgoldenrodyellow;
}

input::-webkit-inner-spin-button {display: none;}

div::before {
  content: "кг.";
  display: block;
  position: absolute;
  right: 68px;
  bottom: 14px;
  font-size: 20px;
  color: black;
  font-family: monospace;
  letter-spacing: -1px;
}

<form>
  <div><input type="number" placeholder="000"></div>
</form>

БЛОГ НА HUSL

Как сделать единицу измерения в input?

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