Want no border around input hidden field with css?

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.

If you enjoyed this post, make sure you subscribe to my RSS feed!