Как сделать границу внутри ввода?

Question

У меня есть запрос О границе ввода .

Мне нужно создать solid цветную рамку-вставку . У меня есть ввод И Я хочу поместить границу внутри него И , когда я наведу на него, граница станет меньше Я нашел решение здесь Но это не работает Becuase Я не могу добавить span или div внутри ввода , чтобы наложить на него рамку

        <input class="task-text" type="text" name="task" id="user-task">

это ссылка на аналогичную проблему

<[1] : <a href="/6343174/css-inset-borders">>

Любое решение?

Answer 1

Что-то вроде этого?

.task-text {
  padding: 5px;
  outline: none;
  border: none;
  box-shadow: inset 0 0 0 5px red;
}

.task-text:hover {
  box-shadow: inset 0 0 0 2px red;
}

<input class="task-text" type="text" name="task" id="user-task">

Answer 2

Это можно сделать с помощью свойств css outline и css outline-outset.

input {

  padding: 10px;
  outline: 1px solid black;
  outline-offset: -10px;

}

<input type="text">