How to remove input and textarea borders from all browsers when clicked?

This is not standard for all browsers, so I can guarantee that.

If this is happening in all browsers, there is the possibility that you are using bootstrap or some other library that has css embedded

If you manipulate this css to leave the form you like

textarea:focus, input:focus, select:focus {
    box-shadow: 0 0 0 0;
    border: 0 none;
    outline: 0;
} 

This is an example of css that would remove both the edges and the leftover effect in blue

The border is used to show that an element is in focus (when you type something or press the enter button).

You can remove it like this:

textarea:focus, input:focus, select:focus {
    outline: 0;
}

It's good to remember that with this same rule you can also customize this behavior (rather than simply remove it).

This is advisable, since for usability reasons it is preferable for the user to always have a way of knowing which element is currently in focus.

Adapted response from this link .

Use the outline CSS attribute, as in the example:

input, textarea, select {
    outline: 0;
}

See the jsfiddle .

I believe you are using ASP.NET MVC 5 that uses Twitter Bootstrap , then you could add this CSS in your Site.css file

.form-control:focus {
  border-color: #cccccc;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

You can define a class or id for the component, for example:

<input class="form-itens">

And then configure it in the CSS file:

.form-itens:focus {
   box-shadow:none;
}

This will solve.