Remove border from inputs when clicked in HTML

In this article we will learn how to remove border from inputs when clicked, which is also known as the focus event.

What’s up programmer, how are you? Let’s learn something new!

Some browsers or even frameworks like Bootstrap add additional styles which can be a problem

So let’s first create a form to have an example code:

We created a basic form, with an input and a textarea, so you can see that the CSS code we are going to insert has no input limit

<h1>Fill the form</h1>
<form>
 <div>
  <input type="text" name="username" id="username" placeholder="Your name">
 </div>
 <div>
  <textarea name="msg" id="msg" placeholder="Your message"></textarea>
 </div>
 <div>
  <input type="submit" value="Send">
 </div>
</form>

Now let’s see the return in the browser:

Note that that orange border, which may vary between browsers, is an automatically added style

So that’s exactly what we’re going to remove, and we need the following rule:

div {
 margin: 20px;
}

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

The margin only serves to unplug the divs, it is not necessary

The big difference will be made by the box-shadow, which is the ‘shadow’ of the div

And also removing the outline, all this is of course done in the focus event with the special selector :focus

See the result:

And so we can remove the border from the inputs, which is inserted in the focus event, cool, right? 😀

Conclusion

In this article, we decided to remove the border of the inputs, which originate when we click on any of them, that is, we activate the :focus

This is done by removing the box-shadow from the element and also setting the outline property to 0

Then we will have an input without additional effects, when we click on it

Want to learn more about CSS? Click here!