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.