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

Question

Just look at the image to get an idea:

When clicked this edge with blue shadow becomes visible. I think it is standard of all browser.

Some solution?

Answer 1

This is not standard of all browser, I can assure you.

If this is happening on all browsers, there is a possibility that you are using bootstrap or any other library that has css inlaid

If you manipulate that css to leave the way 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

Answer 2

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

You can remove it like this:

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

It is good to remember that with this same rule you can also customize this behavior (instead of simply removing it).

This is even advisable, since for usability reasons it is preferable that the user always has a way of knowing which element has the focus currently.

Adapted response from this link.

Answer 3

Use the attribute outline CSS, as in the example:

input, textarea, select {
    outline: 0;
}

See the jsfiddle.

Answer 4

I believe you’re wearing ASP.NET MVC 5 using Twitter Bootstrap, then you could add this CSS to your Site.css file

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

Answer 5

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

<input class="form-itens">

And then set up in the CSS file:

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

That will solve.