h4x3d.com » hidden http://h4x3d.com online portfolio of Julian Klewes Mon, 25 Jul 2011 13:18:32 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Want no border around input hidden field with css? http://h4x3d.com/want-no-border-around-input-hidden-field-with-css/ http://h4x3d.com/want-no-border-around-input-hidden-field-with-css/#comments Tue, 14 Aug 2007 22:05:07 +0000 jez http://www.h4x3d.com/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:
border-hidden.gif

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)
border-hidden-css.gif

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

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.

]]> http://h4x3d.com/want-no-border-around-input-hidden-field-with-css/feed/ 4