Do you hate those orange borders on forms in Google Chrome?

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Hi everyone! Don't you hate those orange borders that Google Chrome adds in when you give a text box focus? Well I found out a way to take this orange border away! I suggest this to Yola too because all of the forms have that orange border when you focus a form. Here is what I am talking about:



It just makes it look ugly when it has that extra border that Google Chrome automatically adds in. Well, here is the CSS to remove that!

Ok, first, make the form:

<form name="myform">

<label for="name">Name:</label> <input type="text" name="name" class="input">

</form>

Now, the CSS:

.input {
outline:none;

(More CSS here...)

}

.input:focus {
outline:none;

(More CSS here...)

}

So basically, the CSS attribute that removes that is outline:none;

You can add this to any form. You can also do it this way:

<form name="myform">

<label for="name">Name:</label> <input type="text" name="name" style="outline:none;">

</form>

So now you can make your form like this:


Without that extra orange outline! :)

I hope this helps people that want to do this!

Sincerely,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
  • happy

Posted 8 years ago

  • 1
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Nathan,

Thanks for the tip. I'm sure others are unhappy with the orange border as well and will find this useful.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem :)
Photo of Amel Sućeska

Amel Sućeska

  • 1 Post
  • 2 Reply Likes
Whow thanks for this! Really appreciate it... I thought I'd be stuck with that orange outline forever :D
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I'm glad it helped! I, too, used to think I would be stuck with it forever until I discovered that handy little CSS rule.
Photo of Ross Warsing

Ross Warsing

  • 1 Post
  • 0 Reply Likes
Thanks Nathan! I was having a difficult time trying to remove that border from several of my projects! I actually resorted to using list tags and anchor links to call a jquery form submission to avoid that focusing issue. This solves just about everything :)
Photo of Brian Theuma

Brian Theuma

  • 1 Post
  • 0 Reply Likes
cool thanks! ... I just added to the top of my css " *{outline:none;} " andit took care of all my outlines as I was getting them on buttons too for some strange reason ... but that could also be because I am using bootstrap .. :) anyway nice article