Chrome browsers adds a yellow border around the input textbox of our form even we already set the border to zero.

Firefox browsers would render a clean border around the input textbox of the form I created on my page. Setting border to zero to the input box would allow us to put a very nice background design for our input textbox. The default for input textbox will have a border 1px around the textbox.

With the design forms, most of the designers would love to design a good input textbox backgrounds with bigger paddings and some icons added to it. With this, we have to set the border to zero :

[css]
#myform input#your_textbox_id{
border:0;
}
[/css]

Firefox browsers is rendering this beautifully but the problem is with the Chrome Browsers.

Problem:

Chrome added yellow borders around the input textbox of the form. Which adding the border yellow around the input textbox will break the designs of the background of the input textbox.

Solution:

Aside from setting border to zero also set the outline to none. That will fix the yellow border of the input textbox in the Chrome.

[css]
#myform input#your_textbox_id{
border:0;
outline:none;
}
[/css]

Hope that helps.