How to do border inside the input?

Question

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.com/questions/8452739/css-inset-borders>

Any Solution?

score 2 · Answer 1 · answered Jul 09 '20 at 04:14

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

answered Jul 09 '20 at 04:14

Bren

605
4
15

score 1 · Answer 2 · answered Jul 09 '20 at 04:32

1

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

answered Jul 09 '20 at 04:32

topsoftwarepro

773
5
19

How to do border inside the input?

2 Answers2