Please help me fix this issue. I would like to set the width of INPUT and TEXTAREA elements to 100% so that they entirely fit the table cell but I noticed that the right border is truncated.
I tried to wrap the INPUT inside a DIV and set 'overflow' to 'hidden' as I read on other answers but it does not work:
<div style="overflow:hidden">
<input class="input_field" type="text" />
</div>
Use box-sizing: border-box
(and the corresponding browser-specific versions):
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
See http://jsfiddle.net/trwut/4/
Related reading: http://paulirish.com/2012/box-sizing-border-box-ftw/