I have qoestion About Input border.

I need to create a solid color inset border. I have an input And I want To put Border Inside It And when I hover On it border will Get smaller I Found A Solution here But It Can't Work Becuase I can't append span or div inside the input to put border on it

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

this is the link of similar problem

<[1]: ;

Any Solution?

I have qoestion About Input border.

I need to create a solid color inset border. I have an input And I want To put Border Inside It And when I hover On it border will Get smaller I Found A Solution here But It Can't Work Becuase I can't append span or div inside the input to put border on it

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

this is the link of similar problem

<[1]: https://stackoverflow./questions/8452739/css-inset-borders>

Any Solution?

• javascript
• html
• css
• input
• border

2 Answers 2

Something like this?

.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">

You can do this by using the css outline and the css outline-outset properties.

input {

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

}

<input type="text">