CSS tip: Removing borders around an input control when it has focus

When you click into a text input field in Chrome, you’ll notice the border changes to indicate it has focus.  Let’s have a look..

Here is the input control before it has focus:-

beforefocus

And here it is when it has focus:-

withfocus

It’s a handy visual cue, but what if you don’t want that to happen?   It’s quite easy to fix – just create the following rule in css for your input control.  In my example, I’ve created a class named ‘nofocus’ so that I can apply it to any controls on my page:-

.nofocus {
outline: none;
}

And my text input control looks like this:-

<input class="nofocus" type="text" />

Simple, isn’t it? I believe safari does something similar albeit maybe with a different outline colour.

 

Leave a Reply

Your email address will not be published. Required fields are marked *