Today I worked on a template for another client and run into some strange bug. Well not really a bug, but more of an annoyance that took ten minutes to fix. In the lower part of a site near the commenting box two rectangle border showed up. Obviously this was caused by the input field and its CSS.

Here is the old css (excerpt)

input { border: 1px solid rgb(204, 204, 204); padding: 3px 6px; background: rgb(255, 255, 255) none repeat; color: rgb(102, 102, 102); }

and here a quick screencap of what the problem looked like:

I applied this quick CSS hack to my code to make the border disappear:

input[type="hidden"] { border: 0; padding: 0; margin: 0; background: white; }

(marked green in screencap)

Voila, the rectangles are gone. No more annoying borders around hidden input fields with CSS.

I hope this helped anyone. You can do a similar trick with the input property “submit” if you want to apply different CSS attributes to your input submit form only.